/* ============================================================
   PassGo – stiluri (tema dark, mobil-first, PWA friendly)
   ============================================================ */

:root {
  --bg-0: #0b1020;
  --bg-1: #131a30;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-hover: rgba(255, 255, 255, 0.09);
  --surface-strong: #1b2340;
  --border: rgba(255, 255, 255, 0.1);
  --text: #e6eaf5;
  --text-dim: #9aa6c3;
  --text-faint: #6b7699;
  --accent: #6366f1;
  --accent-2: #8b5cf6;
  --ok: #34d399;
  --danger: #f87171;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 24px 70px rgba(2, 6, 23, 0.6);
  --font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  /* Blocurile de secțiuni din modul compact (Setări → General → Secțiuni):
     paddingul intern al fiecărui bloc și spațiul (marginea) dintre blocuri. */
  --cmp-section-pad: 0px;
  --cmp-section-gap: 16px;
}

* { box-sizing: border-box; }

/* Scrollbar invizibilă pe tot ecranul în Chrome/Edge/Safari (regula de mai
   jos); în Firefox, ascunderea se face punctual (vezi #screen-detail),
   restul elementelor au scrollbar normal. Scroll-ul funcționează mereu. */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(139, 92, 246, 0.16), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0));
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

button { font-family: inherit; }

/* Fără selecție de text oriunde — copierea se face din butoane.
   Câmpurile de formular rămân selectabile (necesar la editare). */
body {
  user-select: none;
  -webkit-user-select: none;
}
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* Fereastra de aplicație e prea îngustă (sub minimul util) — ecran explicativ. */
#narrow-window {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

/* ---------- Ecrane ---------- */
.screen { min-height: 100dvh; }

/* ---- Bara de titlu accent (Window Controls Overlay — PWA instalată) ---- */
html.wco body {
  padding-top: env(titlebar-area-height, 0px);
}
html.wco .screen {
  min-height: calc(100dvh - env(titlebar-area-height, 0px));
}
#wco-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: env(titlebar-area-height, 40px);
  display: flex;
  align-items: center;
  padding-left: 16px;
  background: linear-gradient(135deg, #7562f4, #8b5cf6);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 200;
  -webkit-app-region: drag;
  app-region: drag;
  user-select: none;
  -webkit-user-select: none;
}

/* Detaliile (și formularul de editare) umplu tot spațiul ferestrei:
   fundalul e solid pe tot ecranul, nu doar sub titlu. */
#screen-detail {
  background: #0f1527;
}
html.theme-light #screen-detail {
  background: #eef1f8;
}

.center-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.center-card {
  width: 100%;
  max-width: 400px;
  padding: 40px 32px;
  text-align: center;
  animation: rise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo-badge {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c7d2fe;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 34px rgba(99, 102, 241, 0.45);
}
.logo-badge svg { width: 46px; height: 46px; }

.logo-badge.pulse svg {
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.72; transform: scale(0.94); }
}

h1 {
  font-size: 1.8rem;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

/* Linia „Seif: <email> [Schimbă]" — pe lock și pe ecranul de amprentă. */
.vault-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 26px;
}
.vault-line .lead {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-line .btn-link {
  margin: 0;
  flex: none;
}

/* Butonul „Schimbă" (de lângă „Seif: …"): fără inelul albastru de focus care
   apărea în jurul lui după click/tap sau navigare cu Tab. */
.vault-change:focus-visible {
  outline: none;
}

/* Ce seif operează ecranul de lock. */
.lead {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 26px;
}

.hint {
  color: var(--text-faint);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 18px 0 0;
}

.status {
  min-height: 1.2em;
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--danger);
  text-align: center;
}
.status:empty { display: none; }

/* ---------- Butoane ---------- */
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  color: var(--text);
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 10px 26px rgba(99, 102, 241, 0.4);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 12px 32px rgba(99, 102, 241, 0.55); }

/* Buton de acțiune distructivă (ex. confirmare ștergere importuri). */
.btn-danger {
  background: linear-gradient(135deg, #f87171, #dc2626);
  color: #fff;
  box-shadow: 0 10px 26px rgba(248, 113, 113, 0.35);
}
.btn-danger:hover:not(:disabled) { box-shadow: 0 12px 32px rgba(248, 113, 113, 0.5); }

.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); }

/* Buton ghost cu accent de pericol (ex. „Șterge importurile"). */
.btn-ghost.danger { color: var(--danger); }
.btn-ghost.danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
}

.btn-wide { width: 100%; }

.btn-sm { padding: 8px 12px; font-size: 0.82rem; }

/* ---------- Seif (vault) ---------- */
#screen-vault {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 100px;
}

.vault-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Distanța până la lista de elemente = „Marginea de jos" a antetului
     (Debug → General → Antet). Mobilul își păstrează marginile proprii. */
  margin: 6px 0 var(--dbg-header-gap, 18px);
}

#search {
  flex: 1;
  min-width: 0; /* permite îngustarea odată cu coloana */
  background: var(--surface);
  border: 1px solid var(--border);
  /* Rotunjire proprie, ajustabilă din Setări → Debug → General; implicit
     urmează rotunjirea mică a aplicației (--radius-sm). */
  border-radius: var(--dbg-radius-search, var(--radius-sm));
  padding: 11px 14px;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
#search::placeholder { color: var(--text-faint); }
#search:focus { border-color: var(--accent); background: var(--surface-hover); }

/* ---------- Intrări (entry list) ---------- */
.entry-list { display: flex; flex-direction: column; gap: var(--dbg-entry-gap, 10px); }

/* Delimitator de grup alfabetic (A, B, C …) în lista de elemente. */
.list-letter {
  padding: 8px 4px 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}

.entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--dbg-entry-pad, 11px 12px);
  cursor: pointer;
  animation: rise 0.3s ease both;
  transition: background 0.2s ease, border-color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}
/* Hover: border = culoarea border-ului actual (var(--border)), deschisă puțin
   (mix cu alb) ca să se vadă ușor pe card. */
.entry:hover { border-color: color-mix(in srgb, var(--border), white 30%); }
/* Light mode: pe alb, border-ul de hover trebuie să fie mai ÎNCHIS ca să se vadă. */
html.theme-light .entry:hover { border-color: color-mix(in srgb, var(--border), black 30%); }
/* Elementul deschis în detalii (dark): card selectat cu fundal NEGRU
   și border 1C2233. */
.entry.selected {
  background: #000000;
  border-color: #1C2233;
}
/* Light mode (carduri, NON-compact): fundal selectat EDEEF8 + border vizibil (9AA2D6). */
html.theme-light:not(.compact) .entry.selected {
  background: #EDEEF8;
  border-color: #9AA2D6;
}
/* Modul COMPACT (dark + light): elementul selectat NU are NICIUN stil propriu —
   arată exact ca un element normal (fără fundal, fără border), iar dividerile
   dintre elemente RĂMÂN și în jurul lui (nimic nu le suprascrie). */

.avatar {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(140deg, var(--h1), var(--h2));
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.18);
  user-select: none;
}

.entry-body { flex: 1; min-width: 0; }

.entry-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  font-size: 0.98rem;
}
.entry-title-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Iconul „Acces oferit" (partajat de mine): în dreapta titlului, de tot. */
.entry-share-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--text-faint);
}
.entry-share-icon svg { width: 14px; height: 14px; }

.entry-email {
  color: var(--text-dim);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.pw-text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 220px;
}

.icon-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-dim);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn.danger:hover { color: var(--danger); background: rgba(248, 113, 113, 0.12); }

/* Auto Login per element (fulgerul): activ = umplut cu galben, ca steaua de
   favorite — fără fundal. */
#btn-auto-login.active { color: #fbbf24; }
#btn-auto-login.active svg { fill: currentColor; }
#btn-auto-login.active:hover { color: #fbbf24; }
.fav-btn.active { color: #fbbf24; }
.fav-btn.active svg { fill: currentColor; }
.fav-btn.active:hover { color: #fbbf24; }

/* ---------- Stare goală ---------- */
.empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }

/* Cardul „Niciun contact": full width, cu același padding ca cardurile de
   contact de deasupra lui; cardul umple spațiul rămas, iar titlul + textul
   sunt centrate vertical. */
#contacts-empty {
  padding: 11px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#contacts-empty .empty-sub {
  margin-bottom: 0; /* fără buton aici — centrare verticală curată */
}
.empty-sub { color: var(--text-dim); font-size: 0.88rem; margin: 0 0 20px; }

/* Lista de linkuri din modal (mai multe URL-uri per element).
   Fiecare rând: alias (~40%) + url (restul, cu „×" în interiorul inputului). */
.url-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.url-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.url-row .url-alias {
  flex: 0 0 40%;
  min-width: 0;
  margin-top: 0;
  padding: 7px 10px;
}
.url-field {
  position: relative;
  flex: 1;
  min-width: 0;
}
.url-field .url-input {
  width: 100%;
  margin-top: 0;
  padding: 7px 34px 7px 10px; /* loc pentru „×" în interior */
}
.url-field .url-del {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.url-field .url-del:hover { background: rgba(248, 113, 113, 0.14); color: var(--danger); }
.url-add {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.url-add:hover { border-color: var(--accent); color: var(--text); background: var(--surface-hover); }

/* „+" din antetul câmpului Linkuri: împins în DREAPTA, fără fundal/border. */
.field-head .url-add {
  margin-left: auto;
  border: none;
  background: transparent;
}
.field-head .url-add:hover { background: transparent; border: none; }

/* Etichete (tags) în formularul de editare: casetă tip textarea cu cipuri +
   input inline; fiecare cip are × în dreapta. */
.tags-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--dbg-input-radius, var(--radius-sm));
  padding: 6px 10px;
  min-height: 40px;
  margin-top: 6px; /* distanța de la label, ca la restul inputurilor */
}
html.theme-light .tags-box {
  background: #f2f5fa;
  border-color: rgba(15, 23, 42, 0.16);
}
.tags-chips {
  display: contents;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(117, 98, 244, 0.16);
  border: 1px solid rgba(117, 98, 244, 0.35);
  color: var(--text);
  border-radius: 6px; /* colțuri puțin rotunjite, nu pastilă */
  padding: 3px 5px 3px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
.tag-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.tag-del:hover { color: var(--danger); }
#f-tags-input {
  flex: 1;
  min-width: 120px;
  width: auto;
  margin-top: 0;
  background: transparent;
  border: none;
  padding: 4px 2px;
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
}
html.theme-light #f-tags-input {
  background: transparent;
  border: none;
}
/* Etichetele în pagina de detalii (fără ×). */
.tags-view {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tags-view .tag-chip {
  cursor: default;
}

/* Câmpuri marcate „2" (jumătate) în Personalizare → alături și în editare. */
.edit-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dbg-detail-gap, 12px);
}

/* Antet de secțiune (tip „Header" din Personalizare): bară cu fundal solid —
   în dark mode NEGRU (#000), în light mode lavanda deschis (#E3E5F7). */
.detail-section-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  font-weight: 700;
  background: #000;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 12px; /* distanță între grupurile de header */
}
.detail-section-head:first-child {
  margin-top: 0;
}
/* Compact: spațiu mai mare între header și primul rând de sub el. */
html.compact #screen-detail .detail-section-head {
  margin-bottom: 10px;
}
html.theme-light .detail-section-head {
  background: #E3E5F7;
  color: var(--text);
}
/* Light non-compact: fundalul antetului puțin mai închis. */
html.theme-light:not(.compact) .detail-section-head {
  background: #D9DCF0;
}
/* Compact: NICIUN separator lângă un antet de secțiune — fără linie sub antet
   și fără linie între ultimul rând și un antet care urmează (perechea dinaintea
   antetului nu are border-bottom). */
html.compact #screen-detail .detail-section-head + .detail-row,
html.compact #screen-detail .detail-section-head + .detail-row-pair {
  border-top: none;
}
html.compact #screen-detail .detail-row-pair:has(+ .detail-section-head) {
  border-bottom: none;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(4, 8, 20, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: fade 0.2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 460px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 24px;
  background: var(--surface-strong);
  animation: rise 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-head h2 { margin: 0; font-size: 1.2rem; }

/* Istoricul parolelor schimbate (modal din formularul de editare). */
.pw-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46dvh;
  overflow-y: auto;
}
.pw-history-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pw-history-pw {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
}
.pw-history-side {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pw-history-date {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.pw-history-copy {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.pw-history-copy svg { width: 15px; height: 15px; }

/* Pas intermediar „Element nou": alegerea tipului (Login / Identitate / Card). */
.type-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 8px;
}
.type-picker-option {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.type-picker-option:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.field {
  display: block;
  margin-bottom: 14px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* Două câmpuri pe același rând (ex. Expiră + CVV la adăugarea cardului,
   parola nouă + confirmare / PIN + repetare în Securitate). */
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px; /* ca un .field normal (spațiu până la următorul element) */
}
.field-sub {
  min-width: 0;
}
.field-pair .field {
  margin-bottom: 0;
  min-width: 0;
}

.field input,
.field textarea {
  width: 100%;
  margin-top: 6px;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--border);
  /* Rotunjirea inputurilor, ajustabilă din Debug → General → Rotunjire („Inputuri"). */
  border-radius: var(--dbg-input-radius, var(--radius-sm));
  padding: 8px 13px 7px; /* mai compact: bottom mai mic decât top */
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
  outline: none;
  transition: border-color 0.2s ease;
  resize: vertical;
}
.field input:focus,
.field textarea:focus { border-color: var(--accent); }

/* Rândul cu input + acțiuni: ochiul stă ÎN INTERIORUL inputului, în dreapta. */
.pw-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.pw-row input {
  flex: 1;
  margin-top: 0;
  padding-right: 42px; /* loc pentru ochi */
}
.pw-row .icon-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

/* Pagina „Personalizare": comutatoarele câmpurilor + rândurile câmpurilor custom. */
.customize-toggle {
  padding: 6px 0;
}
/* Cardurile din „Personalizare" urmează ajustările din Debug → Detalii:
   paddingul → „Carduri" (--dbg-detail-row-pad), distanța dintre ele → „Margini"
   (--dbg-detail-gap). */
/* Taburile de tip (Login / Identitate / Card Bancar) din Personalizare:
   aceeași înfățișare ca taburile din Setări. */
.customize-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* Spațiu mai mare între taburi și primul card. */
  margin-bottom: 16px;
}
.customize-tab {
  appearance: none;
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  padding: var(--dbg-settings-pad, 9px 16px);
  border-radius: var(--dbg-settings-cat-radius, 999px);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.customize-tab:hover { background: var(--surface-hover); color: var(--text); }
.customize-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
#customize-fields,
#custom-fields-list {
  display: flex;
  flex-direction: column;
  gap: var(--dbg-detail-gap, 12px);
}
/* Lățimea cardurilor din Personalizare: mereu tot rândul (butonul 1/2
   controlează doar cum apar câmpurile în pagina de DETALII). */
#customize-form .customize-card,
#customize-form .custom-field-row {
  flex: 1 1 100%;
}
/* Distanța dintre cardurile standard și cardurile custom trebuie să fie ACEAȘI
   gap ca între carduri — nu gap-ul formularului + margin-ul .field. */
#customize-form {
  gap: var(--dbg-detail-gap, 12px);
}
#customize-form > .field {
  margin-bottom: 0;
}
/* Paddingul cardurilor: standard (cu .detail-row, ca să bată regula
   `#screen-detail .detail-row`) ȘI „Câmp nou" → „Carduri" din Detalii. */
#customize-form .customize-card.detail-row,
#customize-form .custom-field-row {
  padding: var(--dbg-detail-row-pad, 11px 12px);
}
/* Câmp standard șters (coș de gunoi): cardul dispare din listă. */
#customize-form .customize-card.cf-deleted {
  display: none;
}
/* Rândul unui card din „Personalizare": toate controalele au ACEAȘI înălțime
   fixă (--cf-row-h), iar butonul ochi e pătrat 1:1 (lățime = înălțime). */
#customize-form .customize-card-row {
  --cf-row-h: 34px;
  align-items: center;
}
#customize-form .customize-card-row .cf-label-input,
#customize-form .customize-card-row .cf-label,
#customize-form .customize-card-row .cf-visibility {
  height: var(--cf-row-h);
}
/* Anulează margin-ul/padding-ul asimetric + line-height-ul de la `.field input`
   (care împingeau inputul mai jos ca butonul/selectul). Centrarea verticală a
   textului/placeholder-ului e garantată prin line-height = înălțimea inputului
   (trucul clasic): distanță egală sus și jos, în orice browser. */
#customize-form .customize-card-row .cf-label-input,
#customize-form .customize-card-row .cf-label {
  margin-top: 0;
  padding: 0 10px;
  line-height: var(--cf-row-h);
}
/* Butonul de vizibilitate (on/off): pătrat 1:1, la fel de înalt ca inputul;
   activ (câmp vizibil / sensibil) = fundal accent. */
.cf-visibility {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cf-row-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--dbg-input-radius, var(--radius-sm));
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cf-visibility:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--accent);
}
.cf-visibility[data-hidden=""],
.cf-visibility[data-sensitive="1"],
.cf-visibility[data-cf-hidden=""] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
/* Butonul de tip (comutator ciclic): fundal accent permanent, ca să se
   distingă de ochi/lacăt. */
.cf-type-btn,
.cf-type-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
/* Butonul de ștergere: fundal roșu permanent (X). */
.cf-delete-btn,
.cf-delete-btn:hover {
  background: linear-gradient(135deg, #f87171, #ef4444);
  border-color: transparent;
  color: #fff;
}
/* Check verde — câmp cu valoare salvată, ÎN INTERIORUL inputului, în dreapta. */
.cf-input-wrap {
  position: relative;
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
}
#customize-form .cf-input-wrap .cf-label-input,
#customize-form .cf-input-wrap .cf-label {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding-right: 26px; /* loc pentru check */
}
.cf-has-value {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
  pointer-events: none;
}
.cf-has-value svg {
  width: 15px;
  height: 15px;
}
/* Mânerul de reordonare din Personalizare („≡" în fața inputului). */
.cf-grip {
  color: var(--text-faint);
  font-size: 1.05rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.cf-grip:active { cursor: grabbing; }
.customize-card.dragging,
.custom-field-row.dragging { opacity: 0.55; }
/* Butonul de lățime (1/2): cifra mare; când e activ („2") → fundal accent. */
.cf-pair-btn svg {
  width: 20px;
  height: 20px;
}
.cf-pair-btn[data-paired="1"],
.cf-pair-btn[data-paired="1"]:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
.cf-visibility svg {
  width: 16px;
  height: 16px;
}
/* Câmpul custom stă tot într-un card (ca restul): titlu deasupra inputului. */
.custom-field-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--dbg-entry-pad, 11px 12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.custom-field-row .cf-label {
  flex: 1;
  min-width: 0;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--dbg-input-radius, var(--radius-sm));
  padding: 8px 10px;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}
/* Verde doar pe rândul „Câmp nou" TOCMAI adăugat („+"); după salvare dispare. */
.custom-field-row.just-added .cf-label {
  background: rgba(16, 185, 129, 0.12);
}
html.theme-light .custom-field-row.just-added .cf-label {
  background: rgba(16, 185, 129, 0.09);
}
/* În Personalizare, inputul unui câmp cu tip „Header" (standard sau custom)
   are fundal D9DCF0. */
.customize-card:has(.cf-type-btn[data-type="header"]) .cf-label-input,
.custom-field-row:has(.cf-type-btn[data-type="header"]) .cf-label {
  background: #D9DCF0;
}
html.theme-light .custom-field-row .cf-label {
  background: #f2f5fa;
  border-color: rgba(15, 23, 42, 0.16);
}
/* Inputul de redenumire a etichetei, în cardurile câmpurilor standard. */
.customize-card .cf-label-input {
  flex: 1 1 140px;
  min-width: 0;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--dbg-input-radius, var(--radius-sm));
  padding: 7px 10px;
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
}
html.theme-light .customize-card .cf-label-input {
  background: #f2f5fa;
  border-color: rgba(15, 23, 42, 0.16);
}
/* Badge „sensibil" pe câmpurile custom din formularul de editare. */
.cf-sensitive-tag {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* Câmp cu ochiul în interior, folosit când mai există și alte butoane în rând
   (ex. „Generează" în modal): ochiul se ancorează de input, nu de tot rândul. */
.pw-field {
  position: relative;
  flex: 1;
  min-width: 0;
  /* span inline implicit → margin-top nu ar avea efect; block ca să fie
     validă distanța de la label (și în interiorul pw-row e ok). */
  display: block;
}
/* „One Time Code" stă direct în .field (fără pw-row): primește aceeași
   distanță față de label ca inputurile obișnuite (margin-top: 6px). */
.field > .pw-field {
  margin-top: 6px;
}
.pw-field input {
  width: 100%;
  margin-top: 0;
  padding-right: 42px;
}
.pw-field .icon-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

/* PIN-ul de pe ecranul de lock: text centrat în câmp. */
#pin-input {
  text-align: center;
  letter-spacing: 0.3em;
  padding-left: 42px; /* compensează ochiul, ca textul să rămână centrat */
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
/* Butonul aflat „în stânga de tot" pe rândul de acțiuni (ex. Șterge, în
   modalul de proiect), cu restul butoanelor rămase în dreapta. */
.modal-actions-left { margin-right: auto; }

/* ---------- Mâner de resize: lățimea coloanelor (desktop) ---------- */
.col-resizer {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 9px;
  transform: translateX(-50%);
  z-index: 30;
  cursor: col-resize;
  touch-action: none;
}
#col-resizer { left: calc(var(--sidebar-w) + var(--list-w)); }
#col-resizer-settings { left: calc(var(--sidebar-w) + var(--settings-w)); }
/* Lățimile coloanelor pot fi fracționare (după drag sau din rem/clamp) — o linie
   de 1px la poziție fracționară cade între doi pixeli și pare îngroșată/estompată.
   Rotunjim poziția mânerului la pixel întreg, ca linia să stea exact pe pixeli.
   (Testul corect pt. suport round(): o DECLARAȚIE — `(round(...))` gol e evaluat
   mereu fals și regula nu se aplica, deci linia revenea groasă la lățimi fracționare.) */
@supports (left: round(nearest, 1px, 1px)) {
  #col-resizer { left: round(nearest, calc(var(--sidebar-w) + var(--list-w)), 1px); }
  #col-resizer-settings { left: round(nearest, calc(var(--sidebar-w) + var(--settings-w)), 1px); }
}
.col-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Grosimea liniei e ajustabilă din Debug → General → Rotunjire
     („Grosime linie coloane"); implicit 1px crisp, ca border-ul sidebar-ului. */
  left: calc(50% - 1px);
  width: var(--dbg-resizer-w, 1px);
  background: var(--border);
  transition: background 0.15s ease;
}
.col-resizer:hover::after,
.col-resizer.dragging::after {
  background: var(--accent);
}

body.resizing {
  cursor: col-resize;
  user-select: none;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  background: var(--surface-strong);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 13px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent); /* textul toasturilor = accent */
  box-shadow: 0 16px 44px rgba(2, 6, 23, 0.55);
  animation: toast-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.toast.ok { border-color: rgba(52, 211, 153, 0.55); }
.toast.err { border-color: rgba(248, 113, 113, 0.55); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Pe mobil: toast-ul e aproape cât ecranul și stă DEASUPRA barei de butoane. */
@media (max-width: 639px) {
  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(100px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    transform: none;
    text-align: center;
    animation: toast-in-mobile 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
}
@keyframes toast-in-mobile {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .center-card { padding: 32px 22px; }
  #screen-vault { padding: 0 14px 90px; }
  .entry { padding: 12px; }
}

/* Pe mobil, bara de căutare rămâne fixă (sticky) sus, cu fundal solid
   care maschează lista derulată sub ea. */
@media (max-width: 639px) {
  .vault-toolbar {
    position: sticky;
    top: 0;
    z-index: 15;
    background: #131a30;
    /* Distanța până la listă urmează „Marginea de jos" (Debug → General → Antet).
       Bara iese cu același padding orizontal ca restul ecranelor (--page-pad). */
    margin: 0 calc(0px - var(--page-pad, 12px)) var(--dbg-header-gap, 18px);
    padding: 10px var(--page-pad, 12px);
  }
  html.theme-light .vault-toolbar {
    background: #ffffff;
  }
}
@media (max-width: 560px) {
  .vault-toolbar {
    margin: 0 calc(0px - var(--page-pad, 12px)) var(--dbg-header-gap, 14px);
    padding: 10px var(--page-pad, 12px);
  }
}

/* ---------- Ecran: detalii intrare ---------- */
.detail-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 100px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Home (Carduri): paddingul paginii e ajustabil din Debug (mobil). */
#screen-categories .detail-container {
  padding: var(--dbg-cat-page-pad, 0 20px 100px);
}

/* Proiecte: containerul folosește ACEEAȘI ajustare ca Home
   (Debug → Carduri → Container). */
#screen-projects .detail-container {
  padding: var(--dbg-cat-page-pad, 0 20px 100px);
}

/* Contacte: containerul folosește aceeași ajustare ca Home / Proiecte. */
#screen-contacts .detail-container {
  padding: var(--dbg-cat-page-pad, 0 20px 100px);
}

/* Detalii: paddingul paginii e ajustabil din Debug (mobil). */
#screen-detail .detail-container {
  padding: var(--dbg-detail-page-pad, 0 20px 100px);
}

.detail-header {
  position: sticky;
  top: 0;
  z-index: 35; /* peste liniile de resize (30): bg-ul de sub titlu acoperă linia */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--dbg-header-pad, 16px 0);
  /* Fundal solid: conținutul (formularul) nu mai trece vizibil pe sub titlu. */
  background: #0f1527;
  /* Spațiu sub titlu și ce urmează (detalii, categorii, setări) — ajustabil din
     Debug → General → Antet („Marginea de jos"). */
  margin-bottom: var(--dbg-header-gap, 12px);
}
html.theme-light .detail-header {
  background: #ffffff;
}

.detail-title {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
  /* Flex + overflow vizibil: badge-ul iconului nu mai e tăiat;
     elipsa titlului e pe .detail-title-text. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.detail-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Numele elementului + numele proiectului (mic și discret) SUB el. */
.detail-title-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.detail-project {
  max-width: 100%;
  margin-top: 1px;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Detalii: grupul din antet (icon + nume + proiect) stă LÂNGĂ butonul de
   întoarcere, aliniat la stânga — și pe mobil, nu doar pe desktop. */
#screen-detail .detail-title { justify-content: flex-start; }

/* Editare/Adăugare: „Editează intrarea" / „Adaugă intrare" CENTRAT, iar
   săgeata de back reapare (pe desktop e ascunsă în mod normal). */
#screen-detail.editing #btn-back { display: inline-flex; }
#screen-detail.editing .detail-title { justify-content: center; }

.kebab-wrap { position: relative; flex: none; }

.kebab-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 180px;
  padding: 6px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  animation: rise 0.16s ease;
}

.kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.kebab-item svg { width: 17px; height: 17px; }
.kebab-item:hover { background: var(--surface-hover); }
.kebab-item.danger { color: var(--danger); }
.kebab-item.danger:hover { background: rgba(248, 113, 113, 0.12); }

.detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--dbg-detail-gap, 12px);
  margin-top: 8px;
  flex: 1;
  animation: rise 0.3s ease both;
}

.detail-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 12px;
}

/* Detalii: paddingul cardurilor (rândurile) e ajustabil din Debug. */
#screen-detail .detail-row {
  padding: var(--dbg-detail-row-pad, 11px 12px);
}

.detail-row-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin-bottom: 7px;
}

.detail-row-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pereche de carduri pe același rând (ex. CVV + PIN la carduri bancare):
   fiecare e un CARD propriu (.detail-row), distanța dintre ele urmează
   „Margini" din Debug → Detalii (minim 8px, ca să nu se lipească niciodată). */
.detail-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.detail-row-pair > .detail-row + .detail-row {
  margin-left: max(var(--dbg-detail-gap, 12px), 8px);
}
/* Pe mobil, cardurile din pereche (detalii + editare) se afișează FULL WIDTH,
   unul sub altul. */
@media (max-width: 480px) {
  .detail-row-pair,
  .edit-row-pair { grid-template-columns: 1fr; }
  .detail-row-pair > .detail-row + .detail-row {
    margin-left: 0;
    margin-top: max(var(--dbg-detail-gap, 12px), 8px);
  }
  /* Compact: linia verticală dintre cele două carduri devine orizontală. */
  html.compact #screen-detail .detail-row-pair > .detail-row + .detail-row {
    margin-top: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 4px;
  }
  html.compact #screen-detail .detail-row-pair > .detail-row:first-child {
    padding-right: 4px;
  }
}
/* Cardurile din pereche (CVV/PIN) rămân compacte: butoane mai mici și
   spațiere mai strânsă, ca să nu pară mai înalte decât cardurile vecine. */
.detail-row-pair > .detail-row {
  padding-top: 9px;
  padding-bottom: 9px;
}
.detail-row-pair .detail-row-label {
  margin-bottom: 5px;
}
.detail-row-pair .icon-btn {
  width: 28px;
  height: 28px;
}

.detail-value-text {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  word-break: break-word;
}

/* Numele browserelor conectate (Setări → Browser): evident, ca un titlu de
   secțiune — bold, aceeași mărime ca titlurile blocurilor din setări. */
.ext-browser-name {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  word-break: break-word;
}

/* Un browser din lista „Browsere conectate": icon + nume (ex. icon Brave). */
.ext-browser-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
}
.ext-browser-item:last-child { margin-right: 0; }
.ext-browser-ico {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex: none;
  object-fit: contain;
}
/* Fallback pentru browsere fără icon cunoscut: litera inițială pe gradient. */
.ext-browser-ico-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.ext-browser-name-text {
  font-weight: 700;
  font-size: 1rem;
  word-break: break-word;
}

.detail-row .pw-text { max-width: none; font-size: 0.95rem; }
.detail-row.revealed .pw-text { letter-spacing: 0; color: var(--text); }

/* Linkuri în detalii: icon rotund în stânga, aliasul vizibil, domeniul curat
   dedesubt. Nr. de coloane e ajustabil din Debug → Detalii → Altele
   (desktop: --dbg-url-cols-d, mobil: --dbg-url-cols-m). Fără card — listă curată. */
.detail-url {
  display: grid;
  flex: 1; /* umple toată lățimea rândului/cardului, oricât de larg ar fi */
  min-width: 0;
  grid-template-columns: repeat(var(--dbg-url-cols-d, 3), minmax(0, 1fr));
  row-gap: 18px;
  column-gap: 24px;
}
/* Nr. de coloane desktop se aplică la TOATE lățimile ≥ 481px (nu doar
   fullscreen) — fără suprascriere fixă la 900px; pe mobil (<480px) se aplică
   var(--dbg-url-cols-m). */
@media (max-width: 480px) {
  .detail-url { grid-template-columns: repeat(var(--dbg-url-cols-m, 1), minmax(0, 1fr)); }
}
.detail-url .url-item:only-child { grid-column: 1 / -1; }
.detail-url .url-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--accent-2);
  text-decoration: none;
  cursor: pointer;
}
.detail-url .url-item:hover .url-domain { text-decoration: underline; }
.detail-url .url-favicon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.detail-url .url-favicon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* iconul rămâne întreg, micsorat, pe fundal alb */
  padding: 2px;
}
.detail-url .url-favicon svg {
  width: 16px;
  height: 16px;
}
.detail-url .url-favicon.brand svg { width: 15px; height: 15px; }
.detail-url .url-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.detail-url .url-alias {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
}
.detail-url .url-domain {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-faint);
  word-break: break-all;
}

.detail-note {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
}
/* Notele + butonul de copiere: textul flexibil, butonul sus în dreapta. */
.notes-row {
  align-items: flex-start;
}
.notes-row .detail-note {
  flex: 1;
  min-width: 0;
}

/* Atașamente importate din Enpass: fiecare e un card propriu (.detail-row),
   iar .attachment e doar wrapper-ul intern (fără altă casetă înăuntru). */
.attachment {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.attachment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer; /* click pe spațiul liber → extinde */
}
.attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--accent-2);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  word-break: break-word;
}
.attachment-link:hover { text-decoration: underline; }
.attachment-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.attachment-expand {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}
.attachment-expand:hover {
  background: var(--surface-strong);
  color: var(--text);
}
.attachment-expand svg {
  width: 18px;
  height: 18px;
  transition: transform 0.18s ease;
}
.attachment-expand.expanded svg { transform: rotate(180deg); }
/* Corpul expandat: doar linie delimitatoare între „titlu" (numele fișierului)
   și conținut — fără casetă/border pe conținut. */
.attachment-body {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.attachment-text {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* Atașamente în formularul de editare. */
.attach-edit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
/* „Adaugă atașament": compact, aliniat la stânga (nu întins pe tot rândul). */
.attach-edit-list .attach-add-btn {
  align-self: flex-start;
}
.attach-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.attach-edit-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text);
  word-break: break-word;
}
.attach-edit-name svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--text-faint);
}
.attach-edit-del {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.attach-edit-del:hover {
  background: rgba(248, 113, 113, 0.14);
  color: var(--danger);
}

/* Cod 2FA din detalii: cod mare monospace + numărătoare inversă. */
.otp-code {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: 2px;
  color: var(--text);
}
.otp-countdown {
  color: var(--text-faint);
  font-size: 0.76rem;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.muted { color: var(--text-faint); }

.detail-meta {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.76rem;
  padding-top: 6px;
}

/* Footer lipit de josul panoului de detalii: „Partajat cu …" + data.
   Paddingul de sus dă spațiu clar între ultimul card și „Creat / Modificat". */
.detail-footer {
  margin-top: auto;
  padding-top: 28px;
  text-align: center;
}
.detail-footer .shared-with-note {
  margin: 0 0 4px;
}
.detail-footer .shared-note {
  margin: 0 0 4px;
}
.detail-footer .detail-meta {
  padding-top: 0;
}

@media (max-width: 560px) {
  .detail-container { padding: 0 14px 90px; }
  .settings-shell { padding: 0 14px 90px; }
}

/* ---------- Bara de navigare de jos ---------- */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  background: rgba(11, 16, 32, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}

.bottom-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-dim);
  min-width: 6rem;
  padding: 0.5rem 0.875rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.bottom-btn svg { width: 1.375rem; height: 1.375rem; }
.bottom-btn:hover { color: var(--text); background: var(--surface); }
.bottom-btn:active { transform: scale(0.96); }
.bottom-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Pe mobil butoanele împart egal lățimea (sunt mai multe: Logins, Proiecte, …).
   Grupul .nav-bottom se „topește" (display: contents), iar toate butoanele sunt
   ordonate explicit cu `order`: Home, Logins, ＋, Proiecte, Contacte. Setări nu
   mai e în bară pe mobil — butonul lui stă în antetul din Home. */
@media (max-width: 639px) {
  .bottom-bar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .bottom-btn {
    min-width: 0;
    flex: 1;
    padding: 0.5rem 0.125rem;
    font-size: 0.6rem;
  }
  .bottom-btn svg { width: 1.25rem; height: 1.25rem; }
  .nav-bottom { display: contents; }
  .nav-bottom .bottom-btn { flex: 1; }
  #btn-nav-home { order: 1; }
  #btn-nav-elements { order: 2; }
  #btn-nav-add { order: 3; }
  #btn-nav-projects { order: 4; }
  #btn-nav-contacts { order: 5; }
  #btn-nav-settings { display: none; }
}

/* Logo-ul din sidebar (vizibil doar pe desktop) = buton de reîncărcare. */
.side-brand {
  display: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.side-brand:hover { filter: brightness(1.12); }
.side-brand:active { transform: scale(0.96); }
.side-brand:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Butonul „Favorite": doar pe desktop (în sidebar, sub Elemente). */
#btn-nav-favorites { display: none; }

/* Butonul „Acasă": doar pe mobil (pe desktop rolul lui îl are logo-ul din sidebar). */
#btn-nav-home { display: none; }
@media (max-width: 639px) {
  #btn-nav-home { display: flex; }
}

/* Tipurile „Identitate" și „Carduri": doar pe desktop (sidebar);
   pe mobil lista „Logins" cuprinde toate tipurile. */
@media (max-width: 639px) {
  #btn-nav-identity { display: none; }
  #btn-nav-cards { display: none; }
}

/* Pe mobil, „+" devine al treilea buton din bară, cu cerc accent.
   Butonul are lățime EGALĂ cu celelalte (distanțe uniforme); cercul e pe SVG. */
@media (max-width: 639px) {
  #btn-nav-add {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.125rem;
    justify-content: center;
  }
  #btn-nav-add span { display: none; }
  #btn-nav-add svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5625rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
  }
  #btn-nav-add:hover { background: none; }
  #btn-nav-add:hover svg { filter: brightness(1.1); }
  #btn-nav-add:active { transform: scale(0.94); }
}

/* ---------- Formulare pe cardurile centrale (login / creare) ---------- */
#login-form,
#create-form {
  display: block;
  text-align: left;
  margin-top: 6px;
}
#login-form .field,
#create-form .field {
  text-align: left;
}
#login-form .btn,
#create-form .btn {
  margin-top: 4px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 16px;
}
.btn-link:hover { color: var(--text-dim); }

/* Separator „SAU" între opțiunile de deblocare. */
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  user-select: none;
  -webkit-user-select: none;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Butonul alb de întoarcere (pe ecranul cu parola master): spațiu față de butonul albastru. */
#btn-login-back { margin-top: 14px; }

/* „Creează seif" și „Deschide alt seif" pe aceeași linie, mai jos. */
.lock-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}
.lock-links .btn-link { margin-top: 0; }

/* ---------- Setări ---------- */

/* Acțiunile din antet (butoanele de Debug): în dreapta titlului, de tot.
   Când butoanele sunt ascunse, containerul păstrează lățimea spacer-ului,
   ca titlul să rămână centrat. */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: none;
  min-width: 34px;
}

.settings-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 100px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Lista de categorii: pe mobil e o bandă orizontală cu derulare.
   Rămâne fixată sub antet la scroll (sections lungi, ex. Securitate). */
.settings-cats {
  position: sticky;
  /* -1px: masca se suprapune ușor pe marginea de jos a antetului (ascunsă
     sub fundalul lui), ca să nu rămână nicio linie vizibilă între ele. */
  top: calc(var(--dbg-header-pad-t, 16px) + 34px + var(--dbg-header-pad-b, 16px) - 1px);
  z-index: 15; /* sub antet (20), peste conținut */
  background: #131a30; /* același solid ca antetul, ca să mascheze conținutul */
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px;
  scrollbar-width: none;
}
.settings-cats::-webkit-scrollbar { display: none; }

.settings-cat {
  appearance: none;
  flex: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  padding: var(--dbg-settings-pad, 9px 16px);
  /* Rotunjirea taburilor, ajustabilă din Debug → General → Rotunjire
     („Taburi setări"); pe mobil implicit pastile, pe desktop 10px. */
  border-radius: var(--dbg-settings-cat-radius, 999px);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.settings-cat:hover { background: var(--surface-hover); color: var(--text); }
.settings-cat.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
.settings-cat:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Conținutul tabului pornește direct sub antet: distanța până la el e exact
   „Marginea de jos" a antetului (Debug → General → Antet). */
.settings-body {
  /* Fără scroll-anchoring: schimbarea panourilor la comutarea taburilor nu
     mai mută singură poziția de scroll (conținutul „sare" în sus sau în jos). */
  overflow-anchor: none;
}
.settings-content { margin-top: 0; }

.settings-cat-pane {
  display: flex;
  flex-direction: column;
  gap: var(--dbg-settings-block-gap, 12px);
  /* Doar fade la comutarea taburilor (fără translateY): conținutul nu mai
     pare că „pornește mai de jos" la fiecare schimbare de tab. */
  animation: fade 0.2s ease both;
}

/* Control segmentat (Dark / Light). */
.seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}
.seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-dim);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
.seg-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------- Formular inline (în locul detaliilor, stil Enpass) ---------- */
.entry-edit {
  margin: 0 auto; /* fără spațiu propriu sub antet: distanța vine din „Marginea de jos"
                     a antetului (Debug → General → Antet) */
  max-width: 640px;
  width: 100%;
  animation: rise 0.25s ease both;
}
.entry-edit form { display: flex; flex-direction: column; gap: calc(var(--dbg-detail-gap, 12px) + 8px); }

/* Câmpurile dinamice: aceeași distanță între ele ca între carduri (Debug →
   Detalii → „Margini"). */
#fields-container {
  display: flex;
  flex-direction: column;
  /* Spații mai mari între inputuri: Margini (Debug → Detalii) + 8px. */
  gap: calc(var(--dbg-detail-gap, 12px) + 8px);
}

/* Rândurile de inputuri și elemente din editare stau în CARDURI (modul carduri);
   paddingul urmează „Carduri" și distanța urmează „Margini" din Debug → Detalii.
   În compact rămân simple, ca înainte. */
#entry-form .field {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--dbg-detail-row-pad, 11px 12px);
  margin-bottom: 0; /* spațiul vine din gap-uri */
}
html.compact #entry-form .field {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Câmpurile cu reordonare prin drag & drop (mâner în stânga) */
.field-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Acțiunile câmpului Parolă (Generează + Istoric): în dreapta labelului,
   simple (fără fundal), aliniate la capătul rândului — ABSOLUT poziționate
   ca să NU adauge înălțime field-head-ului (aliniere identică în perechi
   ca email+parolă / Expiră+CVV). */
.pw-head-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.pw-head-actions .icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.pw-head-actions .icon-btn svg { width: 15px; height: 15px; }
.field-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-dim);
}
/* Câmpul „Linkuri" la editare: lista de rânduri + „+" în DREAPTA inputurilor. */
.url-edit-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.url-edit-wrap .url-list {
  flex: 1;
  min-width: 0;
}
.url-edit-wrap .url-add {
  margin-top: 6px; /* aliniat cu primul rând de inputuri */
}
.field-grip {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 1rem;
  cursor: grab;
  touch-action: none; /* permite drag-ul și pe touch */
  user-select: none;
  -webkit-user-select: none;
}
.field-grip:active { cursor: grabbing; }
.field.dragging { opacity: 0.55; }

/* Butonul de icon din formular: pătrat simplu, în stânga câmpului de nume. */
.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.title-row #f-title { flex: 1; min-width: 0; margin-top: 0; }
/* Orice input dintr-un rând de titlu (numele elementului / numele proiectului)
   ocupă spațiul rămas, lângă butonul de avatar. */
.title-row input { flex: 1; min-width: 0; margin-top: 0; }
/* Select-ul de proiect, lângă input-ul de nume: EXACT aceleași dimensiuni și
   aspect ca inputurile din formular (aceeași înălțime, nu mai înalt). */
.title-row #f-project {
  flex: none;
  width: 34%;
  max-width: 190px;
  min-width: 0;
  margin-top: 0;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--dbg-input-radius, var(--radius-sm));
  padding: 8px 8px 7px; /* ca .field input (dreapta mai mică: săgeata selectului) */
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
  height: auto;
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
  transition: border-color 0.2s ease;
}
.title-row #f-project:focus { border-color: var(--accent); }
html.theme-light .title-row #f-project {
  background: #f2f5fa;
  border-color: rgba(15, 23, 42, 0.16);
}
/* Opțiunile listei derulante: culorile temei (pe Windows lista e desenată de OS). */
#f-project option {
  background: var(--surface-strong);
  color: var(--text);
}
.icon-pick {
  appearance: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.icon-pick:hover { border-color: var(--accent); background: var(--surface-hover); }
.icon-pick-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.icon-pick-preview img { width: 100%; height: 100%; object-fit: cover; }
/* Starea „fără icon": „+" mare și vizibil, ca să se vadă că se alege un icon. */
.icon-pick-preview.empty {
  color: var(--text-dim);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-hover);
  border: 1px dashed var(--border);
}
.icon-pick-plus {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  user-select: none;
}

/* Valoarea hint-ului în modalul „Am uitat parola". */
.hint-value {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  margin: 4px 0 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  word-break: break-word;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}
.toggle-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

.settings-title {
  margin: 0 0 14px;
  font-size: 1rem;
}

/* Titlurile de secțiune din General + Securitate + Debug: discrete, ca etichetele
   din secțiunea Despre — mici, uppercase, fără bold (nu mai par titluri mari). */
#cat-general .settings-title,
#cat-security .settings-title,
#cat-debug .settings-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 400;
  margin-bottom: 7px;
}

/* Badge-ul planului (Standard / Pro) din Setări → General. */
.plan-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex: none;
}
.plan-badge.standard {
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
}
.plan-badge.pro {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* Cardul „Cont activ" din Setări → General: poza de profil în STÂNGA,
   label + e-mail/plan în dreapta. */
#row-account {
  display: flex;
  align-items: center;
  gap: 12px;
}
#row-account .account-info {
  flex: 1;
  min-width: 0;
}
#row-account .detail-row-label {
  margin-bottom: 6px;
}

/* Pătratul de preview/upload al pozei de profil (per cont, per e-mail). */
.profile-pic {
  appearance: none;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--surface-strong);
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-pic .profile-pic-plus {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}
.profile-pic.has-pic .profile-pic-plus {
  display: none;
}

/* Antetul fix de setări: fundal solid, fără opacități, ca să mascheze conținutul. */
.settings-shell .detail-header {
  background: #131a30;
}
html.theme-light .settings-shell .detail-header {
  background: #ffffff;
}
/* Banda de taburi lipită sub antet: pe MOBIL primește un fundal asemănător
   cu al paginii (variație a gradientului body), ca să mascheze conținutul
   care se derulează pe sub taburi; pe desktop coloana rămâne transparentă. */

@media (max-width: 639px) {
  .url-row .url-alias {
    flex-basis: 40%;
  }
  .url-field .url-del {
    width: 24px;
    height: 24px;
  }
}

/* Pe mobil, taburile de setări sunt o BANDĂ ORIZONTALĂ cu derulare, direct
   sub antet (fără div-ul container .settings-body — devine transparent la
   layout), iar conținutul stă sub ele, pe toată lățimea. */
@media (max-width: 639px) {
  .settings-body {
    display: contents; /* scoate wrapper-ul din layout: banda + conținutul devin copii direcți ai shell-ului */
  }
  .settings-cats {
    position: sticky;
    /* Banda pornește EXACT de sub antet: înălțimea antetului e calculată din
       aceleași variabile ca el (padding T/B ajustabile în Debug + iconul de
       34px), iar margin-top anulează „Marginea de jos" a antetului. Scădem
       1px din ambele, ca masca să se suprapună UȘOR pe marginea antetului
       (ascunsă sub fundalul lui, z-index 35 > 15) — așa nu mai rămâne nicio
       linie vizibilă între antet și mască. */
    top: calc(var(--dbg-header-pad-t, 16px) + 34px + var(--dbg-header-pad-b, 16px) - 1px);
    margin-top: calc(0px - var(--dbg-header-gap, 12px) - 1px);
    z-index: 15;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    /* Padding top puțin mai mare: taburile coboară puțin sub antet. */
    padding: 12px var(--page-pad) 14px;
    /* Banda iese la marginile ecranului (ca antetul), nu rămâne în
       padding-ul shell-ului. Fundal asemănător cu al body (gradientul lui
       de bază), ca să ascundă conținutul care se derulează pe sub taburi. */
    margin-left: calc(0px - var(--page-pad));
    margin-right: calc(0px - var(--page-pad));
    background: linear-gradient(160deg, var(--bg-1), var(--bg-0));
    align-self: stretch;
  }
  .settings-cat {
    flex: 1 1 0; /* egale, împărțite pe toată lățimea benzii */
    text-align: center;
    padding: 10px 16px;
    font-size: 0.82rem;
    /* Colțuri puțin rotunjite (nu pastile complete). */
    border-radius: 8px;
  }
  .settings-content {
    margin-top: 0;
    padding: 8px 0 48px;
    max-width: none;
    min-width: 0;
  }
}

/* Antetul Home (Categorii): titlul rămâne centrat, iar „Setări" vine pe mobil
   ca buton ABSOLUT poziționat în dreapta (pe desktop butonul de Setări e în
   sidebar). Padding-ul și margin-ul vin EXCLUSIV din Debug → General → Antet
   (--dbg-header-pad / --dbg-header-gap), ca la toate antetele. Min-height-ul de
   mai jos păstrează înălțimea totală egală cu a antetelor care au butoane de
   34px: 34 + padding T (debug) + padding B (debug). */
#screen-categories .detail-header {
  min-height: calc(34px + var(--dbg-header-pad-t, 16px) + var(--dbg-header-pad-b, 16px));
  box-sizing: border-box;
}
/* Butonul „Setări" din antetul Home: doar pe mobil (pe desktop e în sidebar). */
#btn-home-settings { display: none; }

/* Mobil: în antetul detaliilor ascundem Auto login, Potrivire pe link și
   Afișează autofill — sunt opțiuni de desktop; pe telefon rămân doar
   favoritele, partajarea și meniul ⋮. */
@media (max-width: 639px) {
  #btn-auto-login,
  #btn-match-full-url,
  #btn-force-exact {
    display: none;
  }
  /* Setări: în antetul din Home, lipit de marginea din dreapta a conținutului. */
  #btn-home-settings {
    display: inline-flex;
    position: absolute;
    right: var(--page-pad, 12px);
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Secțiuni din Securitate (biometrie, PIN): card cu titlu. Paddingul cardurilor
   și distanța dintre ele sunt ajustabile din Debug → Setări → Carduri. */
.settings-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--dbg-settings-block-pad, 20px);
  /* Același blur ca la formulare (.card): fundalul pare SOLID (alb în light),
     nu translucid-gri (E9EBED / EDEFF0). Fără umbră — doar efectul de blur. */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Două carduri pe același rând (ex. „Completează automat" + „Auto Login");
   distanța dintre ele = aceeași ajustare „Margini" ca între cardurile obișnuite
   (Debug → Setări → Carduri). Pe ecrane înguste trec unul sub altul. */
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dbg-settings-block-gap, 12px);
}
@media (max-width: 480px) {
  .settings-row { grid-template-columns: 1fr; }
}
/* Linie separatoare între secțiunile din Setări → Browser. În stilul
   CARDURI e ascunsă (cardurile au deja borduri + spațiu între ele); apare
   doar în stilul COMPACT, unde cardurile sunt transparente și liniile sunt
   separarea naturală dintre secțiuni. */
.settings-sep {
  display: none;
}
html.compact .settings-sep {
  display: block;
  border: none;
  height: 1px;
  background: var(--border);
  margin: 0;
  flex: none;
}
.settings-block .detail-row {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* Spațiere între rândurile din același bloc de setări (ex. „Browser" și
   „Legătură cu extensia"). În stilul compact separarea se face prin linii. */
html:not(.compact) .settings-block .detail-row + .detail-row {
  margin-top: 12px;
}

/* Hint sub o secțiune de setări (ex. Setări → Browser). */
.settings-hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Slider cu trepte din setări (ex. intervalul de blocare automată).
   Pista se umple cu accent de la stânga până la mâner (procentul vine din JS, --fill),
   iar treptele (marcaje la fiecare pas) sunt desenate peste tot pe pistă. */
.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 8px;
  align-self: center; /* aliniere verticală explicită în rândul flex */
  border-radius: 999px;
  background:
    /* Treptele: un marcaj de 2px la fiecare 1/6 din lățime (7 trepte). */
    repeating-linear-gradient(to right, var(--text-faint) 0 2px, transparent 2px calc(100% / 6)),
    /* Umplerea accent până la poziția curentă. */
    linear-gradient(to right, var(--accent) var(--fill, 0%), var(--border) var(--fill, 0%));
  cursor: pointer;
  outline: none;
}
.settings-slider:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
/* Pista: înălțime fixă egală cu inputul, ca mânerul să stea exact centrat. */
.settings-slider::-webkit-slider-runnable-track {
  height: 8px;
}
.settings-slider::-moz-range-track {
  height: 8px;
  background: transparent;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -5px; /* centrează mânerul pe pista de 8px: (18 − 8) / 2 */
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.settings-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
/* Light mode: umplerea (progress) rămâne ACCENT, track-ul (restul) e periwinkle
   deschis (#E2E3F6), cursorul alb-închis (#E2E8F0). */
html.theme-light .settings-slider {
  background:
    repeating-linear-gradient(to right, var(--text-faint) 0 2px, transparent 2px calc(100% / 6)),
    linear-gradient(to right, var(--accent) var(--fill, 0%), #E2E3F6 var(--fill, 0%));
}
html.theme-light .settings-slider::-webkit-slider-thumb {
  background: #e2e8f0;
}
html.theme-light .settings-slider::-moz-range-thumb {
  background: #e2e8f0;
}
/* Labelul valorii: textul e centrat explicit în caseta lui (line-height 1 +
   inline-flex), ca să stea mereu pe axa mânerului, indiferent de line-height-ul moștenit. */
.idle-lock-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  flex: none;
  min-width: 74px;
  line-height: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* Codul de conectare a browserului (pairing) — mare, ușor de citit/copiat. */
.pair-code-box {
  margin: 10px 0;
  padding: 14px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--accent);
  background: var(--surface-hover);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  user-select: all;
}

/* Titlu + stare pe același rând (ex. „Deblocare cu PIN" + Activ / Neconfigurat). */
.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.block-head .settings-title { margin: 0; }
.block-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.pin-state-text {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inputul hint-ului din setări: același stil ca celelalte câmpuri. */
#hint-input {
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--dbg-input-radius, var(--radius-sm));
  padding: 11px 13px;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}
#hint-input:focus { border-color: var(--accent); }
html.theme-light #hint-input { background: #f2f5fa; }

/* Comutator (switch) pentru biometrie. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.2s ease;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.switch input:checked + .switch-track {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.switch input:checked + .switch-track::after {
  transform: translateX(20px);
}
.switch-label {
  color: var(--text);
  font-size: 0.9rem;
}

/* Secțiunile de securitate sunt carduri obișnuite: paddingul și distanța dintre
   ele urmăresc Debug → Setări → Carduri („Carduri" + „Margini"), ca în toate
   celelalte taburi de setări. */
/* Formularul de schimbare a parolei umple lățimea disponibilă (fără max-width
   de modal) și arată ca restul cardurilor (fără umbra distinctă de .card). */
#settings-form {
  padding: var(--dbg-settings-block-pad, 20px);
  box-shadow: none;
}
/* Linia sub butonul „Schimbă parola master": separă butonul de status.
   În modul CARDURI linia e ascunsă (cardul are deja structura lui). */
.settings-form-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0 14px;
}
html:not(.compact) .settings-form-divider { display: none; }
#settings-form .pw-row input {
  width: 100%;
}

/* Securitate: fără glow/overlay pe butoanele primare (se proiecta peste inputuri)
   și mai mult spațiu între câmpuri și butoane. Distanța dintre inputuri e
   ajustabilă din Debug → General → Altele → „Distanta inputuri". */
#settings-form .btn-primary,
#pin-set-form .btn-primary {
  box-shadow: none;
}
#settings-form .btn-primary:hover:not(:disabled),
#pin-set-form .btn-primary:hover:not(:disabled) {
  box-shadow: none;
}
#settings-form > .field,
#settings-form > .field-pair,
#pin-set-form > .field,
#pin-set-form > .field-pair {
  margin-bottom: var(--dbg-input-gap, 20px);
}
/* Spațiul dintre inputurile din pereche (PIN nou/Confirmă, parola nouă/
   Confirmă) urmează aceeași ajustare „Distanta inputuri" (nu 12px fix). */
#settings-form .field-pair,
#pin-set-form .field-pair {
  gap: var(--dbg-input-gap, 12px);
}
/* Rândul PIN: inputurile + butonul „Configurează / Schimbă" pe aceeași linie. */
.pin-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: var(--dbg-input-gap, 20px);
}
.pin-row .field-pair {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.pin-row .btn-wide {
  flex: none;
}
/* Butoanele de submit din Securitate: aceeași mărime ca butoanele de la Hint
   (btn-sm) — nu full-width. */
#settings-form .btn-wide,
#pin-set-form .btn-wide {
  margin-top: 4px;
  width: auto;
  padding: 8px 12px;
  font-size: 0.82rem;
}

/* Hint: pe ecrane înguste butoanele trec pe rândul următor (nu ies din ecran). */
.hint-row {
  flex-wrap: wrap;
}
.hint-row input {
  flex: 1 1 180px;
}
.hint-row .btn {
  flex: none;
}
@media (max-width: 560px) {
  .hint-row input {
    flex-basis: 100%;
  }
  .hint-row .btn {
    flex: 1 1 auto;
  }
}

/* ---------- Iconuri per seif (upload + listă) ---------- */
/* Popup-ul de iconuri se poate deschide PESTE alt modal (avatarul proiectului,
   din modalul de proiect) → stă mai sus decât modalele obișnuite (z-index 50),
   iar confirmarea de ștergere a iconului stă peste el. */
#icon-picker-modal { z-index: 60; }
#icon-delete-modal { z-index: 70; }

.icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* spațiu pentru badge-ul × care iese din colț */
  margin-top: 6px;
  min-height: 4px;
  /* Maxim 4 rânduri de iconuri vizibile (44px + gap 12px); restul se
     derulează cu scrollbar. Padding-ul de sus lasă loc badge-ului × al
     primului rând (iese 6px din colț) fără să fie tăiat de scroll. */
  max-height: calc(44px * 4 + 12px * 3 + 14px);
  overflow-y: auto;
  padding: 8px 4px 6px 4px;
  /* Scrollbar CUSTOM vizibilă (Firefox): global scrollbarile sunt ascunse,
     aici le readucem DOAR pentru această listă. */
  scrollbar-width: thin;
  scrollbar-color: var(--text-dim) transparent;
}
/* Chrome/Edge/Safari: regula globală *::-webkit-scrollbar setează
   display: none — o anulăm pentru icon-list și stilizăm thumb-ul. */
.icon-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: block;
}
.icon-list::-webkit-scrollbar-track {
  background: transparent;
}
.icon-list::-webkit-scrollbar-thumb {
  background: var(--text-dim);
  border-radius: 4px;
}
.icon-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
/* Light mode: scrollbar cu TRACK ALB (#FFFFFF) și cursorul alb-închis (#E2E8F0). */
html.theme-light .icon-list {
  scrollbar-color: #e2e8f0 #ffffff;
}
html.theme-light .icon-list::-webkit-scrollbar-track {
  background: #ffffff;
}
html.theme-light .icon-list::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}
html.theme-light .icon-list::-webkit-scrollbar-thumb:hover {
  background: #d8dee9;
}
.icon-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  background: rgba(2, 6, 23, 0.45);
  padding: 2px;
  touch-action: manipulation; /* fără întârziere/zoom la tap */
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.icon-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.icon-thumb:hover { transform: scale(1.06); }
.icon-thumb.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}
.icon-del {
  position: absolute;
  /* Badge-ul iese puțin în afara colțului iconului (grila are gap 12px
     tocmai pentru asta). */
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--danger);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.5);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Avatar cu imagine: fundal ALB implicit — un icon transparent stă pe alb. */
.avatar.img { overflow: hidden; padding: 0; background: #fff; }
.avatar.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Doar faviconurile descărcate: micsorate, centrate pe fundal alb. */
.avatar.img.fav {
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
}
.avatar.img.fav img { object-fit: contain; }

/* ---------- Badge de serviciu (TikTok, YouTube, Google, Instagram, Facebook) ---------- */
.avatar-wrap {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
}
.avatar-wrap .avatar {
  width: 100%;
  height: 100%;
}

/* Stil compact (Setări → Aspect): elemente apropiate, fără card. */
html.compact .entry-list { gap: 0; }
html.compact .list-letter { padding: 14px 8px 4px; }
html.compact .entry {
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 9px 8px;
}
html.compact .entry + .entry { border-top-color: var(--border); }
html.compact .entry:hover {
  border-color: transparent;
  background: none;
}
/* Dividera dintre elemente rămâne la hover DOAR unde exista deja (.entry + .entry);
   primul element de după o literă de grup NU primește linie sub literă la hover. */
html.compact .entry + .entry:hover {
  border-top-color: var(--border);
}

/* Stilul compact se aplică și pe ecranul de detalii. */
html.compact #screen-detail .detail-content { gap: 0; }
/* Container-ul detaliilor în modul compact: ajustabil separat din
   Setări → Debug → Detalii („Container (compact)"). Fără ajustare,
   moștenește containerul normal. */
html.compact #screen-detail .detail-container {
  padding: var(--dbg-detail-page-pad-compact, var(--dbg-detail-page-pad, 0 20px 100px));
}
html.compact #screen-detail .detail-row {
  background: none;
  border: none;
  border-radius: 0;
  padding: 10px 4px;
}
html.compact #screen-detail .detail-row + .detail-row { border-top: 1px solid var(--border); }
/* Compact: cardurile de personalizare urmează „Carduri" din Debug → Detalii
   (--dbg-detail-row-pad). Standard (`.detail-row`) + „Câmp nou" — același
   tratament de rând plat, fără card, cu aceleași linii despărțitoare. */
html.compact #screen-detail .customize-card.detail-row,
html.compact #screen-detail .custom-field-row {
  background: none;
  border: none;
  border-radius: 0;
  padding: var(--dbg-detail-row-pad, 11px 12px);
}
/* Compact: liniile despărțitoare dintre TOATE blocurile consecutive din
   Personalizare (funcționează și după reordonare — orice combinație de
   carduri standard / „Câmp nou", nu doar frați de aceeași clasă). */
html.compact #screen-detail #customize-fields > * + *,
html.compact #screen-detail #custom-fields-list > * + *,
html.compact #screen-detail #custom-fields-list > *:first-child {
  border-top: 1px solid var(--border);
}
/* Compact: perechea CVV/PIN primește linii PLINE deasupra ȘI dedesubt (pe lângă
   cea verticală dintre ele), ca un rând delimitat clar. */
html.compact #screen-detail .detail-row-pair {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
html.compact #screen-detail .detail-row-pair > .detail-row + .detail-row {
  margin-left: 0;
  border-top: none;
  border-left: 1px solid var(--border);
}
/* Conținutul nu stă lipit de linia verticală: padding spre mijloc —
   dreapta la primul card, stânga la al doilea (fără spațiu între carduri). */
html.compact #screen-detail .detail-row-pair > .detail-row:first-child {
  padding-right: 16px;
}
html.compact #screen-detail .detail-row-pair > .detail-row + .detail-row {
  padding-left: 16px;
}
/* Când perechea e ultimul rând (urmează footer-ul), linia de sub ea vine din
   border-bottom-ul perechii — nu se dublează cu linia footer-ului. */
html.compact #screen-detail .detail-row-pair + .detail-footer {
  border-top: none;
}
html.compact #screen-detail .detail-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
}
/* Compact + desktop: antetul iese complet (margin negativă) exact cât
   padding-ul containerului COMPACT (24px). La ecrane late regula cu -32px
   ar depăși panoul și ar tăia partea stângă a paginii la linia coloanei. */
html.compact #screen-detail .detail-header {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
}
/* În stilul compact, grila de linkuri are aceeași distanță verticală ca la
   non-compact (row-gap 18px) și spațiu între coloane prin column-gap. */
html.compact .detail-url {
  --url-cols: var(--dbg-url-cols-d, 3);
  grid-template-columns: repeat(var(--url-cols), minmax(0, 1fr));
  row-gap: 18px;
  column-gap: 14px;
}
@media (max-width: 480px) {
  html.compact .detail-url {
    --url-cols: var(--dbg-url-cols-m, 1);
    grid-template-columns: repeat(var(--url-cols), minmax(0, 1fr));
  }
}

/* Stilul compact se aplică și pe secțiunea de setări. */
html.compact #screen-settings .settings-cat-pane { gap: 0; }
html.compact #screen-settings .detail-row {
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 10px 4px;
}
/* Linia de mijloc între rânduri — aceeași ca la elemente, indiferent ce e între ele. */
html.compact #screen-settings .detail-row:not(:first-child) { border-top-color: var(--border); }
/* Fără linia sub titlul biometriei: rândul comutatorului urmează direct titlul
   (regula de mai sus pune border-top pe orice detail-row care nu e primul copil). */
html.compact #screen-settings #cat-security > .settings-block:has(#chk-biometric) .detail-row {
  border-top-color: transparent;
}
html.compact #screen-settings .card.modal,
html.compact #screen-settings #settings-form {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
html.compact #screen-settings .settings-block {
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  padding: var(--cmp-section-pad, 0);
}
/* În compact: biometrica e lipită de formular (fără linie sub titlul ei),
   dar are linie între ea și blocarea automată; urmează liniile între blocare
   și PIN, și înaintea ultimei secțiuni (Hint). */
html.compact #screen-settings #cat-security > .settings-block:nth-child(3),
html.compact #screen-settings #cat-security > .settings-block:nth-child(4),
html.compact #screen-settings #cat-security > .settings-block:last-child {
  border-top: 1px solid var(--border);
}
/* La fel și în Debug (doar DEV): liniile între cardurile de ajustări. */
html.compact #screen-settings #cat-debug > .dbg-card + .dbg-card {
  border-top: 1px solid var(--border);
}
/* Spațiul dintre blocurile de secțiuni în compact — controlabil din
   Setări → General → Secțiuni („Margini"). Acoperă și cardurile din Debug.
   NU se aplică blocurilor ALĂTURATE din .settings-row (grid 2 coloane) —
   altfel al doilea card (ex. „Auto Login") cădea mai jos. */
html.compact #screen-settings #cat-security > #settings-form + .settings-block,
html.compact #screen-settings .settings-block + .settings-block:not(.settings-row .settings-block) {
  margin-top: var(--cmp-section-gap, 16px);
}
/* Biometrica: fără spațiul mare gol deasupra și dedesubt — rămâne lipită de
   formular și de slider (linia dintre ele rămâne). Selectorul cu #settings-form
   are aceeași specificitate ca regula marginilor și vine după ea, deci câștigă. */
html.compact #screen-settings #cat-security > #settings-form + .settings-block,
html.compact #screen-settings #cat-security > .settings-block:nth-child(3) {
  margin-top: 0;
}
html.compact #screen-settings #cat-security > #settings-form + .settings-block {
  padding: 0;
}

/* Taburile de setări devin compacte (fără pastile, fără linia albastră la activ). */
html.compact #screen-settings .settings-cat {
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 9px 12px;
}
/* Linia separatoare dintre taburi: pe DESKTOP (coloană verticală) stă
   deasupra fiecărui tab de după primul (border-top); pe MOBIL (bandă
   orizontală) stă ÎNTRE taburi (border-left) — altfel border-top-ul ar
   desena o linie deasupra taburilor 2,3,4. */
html.compact #screen-settings .settings-cat:not(:first-child) {
  border-top-color: var(--border);
  border-left-color: transparent;
}
@media (max-width: 639px) {
  html.compact #screen-settings .settings-cat:not(:first-child) {
    border-top-color: transparent;
    border-left-color: var(--border);
  }
}
html.compact #screen-settings .settings-cat:hover {
  background: none;
  color: var(--text);
}
html.compact #screen-settings .settings-cat.active {
  background: none;
  color: var(--accent);
}

.domain-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(2, 6, 23, 0.6);
  pointer-events: none;
}
.domain-badge svg {
  width: 0.6875rem;
  height: 0.6875rem;
  display: block;
}

/* Badge cu icon de E-MAIL (plic) pentru intrările „Email Account": cerc alb în
   colțul dreapta-jos al avatarului, identic ca formă cu badge-urile de brand. */
.email-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(2, 6, 23, 0.6);
  pointer-events: none;
}
.email-badge svg {
  width: 0.6875rem;
  height: 0.6875rem;
  display: block;
  color: #64748b; /* plicul, gri pe fundalul alb */
}

/* Badge pe iconița din antetul ecranului de detalii. */
.detail-icon-wrap {
  position: relative;
  /* Inline-flex: iconul și varianta „fără icon" se centrează vertical, iar
     badge-ul absolut se raportează exact la cutia iconului. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex: none;
}
.detail-icon-wrap .detail-icon-img {
  display: block;
}
/* Placeholder „fără icon" în antetul detaliilor: pătrat neutru cu cheie mică,
   pentru elementele care nu au niciun icon custom/favicon. */
.detail-icon-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--surface-strong);
  color: var(--text-faint);
}
.detail-icon-blank svg {
  width: 16px;
  height: 16px;
}
.detail-icon-wrap .domain-badge {
  /* Badge-ul stă PE colțul din dreapta-jos al iconului din antet (nu în afara
     lui), centrat pe muchia iconului. */
  right: 2px;
  bottom: -1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.detail-icon-wrap .domain-badge svg {
  width: 11px;
  height: 11px;
}

/* ---------- Ecran: categorii (hub-ul de după deblocare) ---------- */
.cat-lead {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

/* Categorii: desktop mereu 3 carduri pe linie; pe mobil 2 pe rând. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dbg-cat-gap, 12px);
}
@media (max-width: 639px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La 2 carduri pe rând iconul și spațierea se strâng puțin, ca titlul
     să aibă loc: icon mai mic + gap orizontal mai mic între el și text. */
  .cat-card { gap: 10px; padding: var(--dbg-cat-pad, 14px 8px); }
  .cat-icon { width: 38px; height: 38px; }
  .cat-icon svg { width: 20px; height: 20px; }
  .cat-name { font-size: 0.95rem; }
}

/* Carduri dreptunghiulare: icon în stânga, titlu + text în dreapta. */
.cat-card {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--dbg-cat-pad, 18px 8px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
/* La fel ca la elementele din listă: border-ul de hover = border-ul actual,
   deschis puțin (mix cu alb). */
.cat-card:hover { border-color: color-mix(in srgb, var(--border), white 30%); }
/* Light mode: border mai ÎNCHIS la hover, ca să se vadă pe alb. */
html.theme-light .cat-card:hover { border-color: color-mix(in srgb, var(--border), black 30%); }
.cat-card:active { transform: scale(0.98); }
.cat-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.cat-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dark mode: cercul iconițelor din Home (Categorii) folosește fundalul
   foarte închis #0F1427 (la fel ca fundalul paginii), păstrând forma de cerc.
   Iconurile însele devin uniform #E6EAF5: brand icons (fill colorat) primesc
   fill-ul nou, iar iconițele cu stroke (currentColor) primesc culoarea prin
   color — astfel toate arată identic, fără culori de brand. */
html:not(.theme-light) .cat-icon {
  background: #0f1427;
  color: #e6eaf5; /* iconițele cu stroke (fill="none") desenate cu currentColor */
}
html:not(.theme-light) .cat-icon svg[fill]:not([fill="none"]) {
  fill: #e6eaf5; /* brand icons: înlocuim culoarea de brand cu cea uniformă */
}
/* Light mode: cercul iconițelor din Home (Categorii) folosește #E8ECF5. */
html.theme-light .cat-icon {
  background: #e8ecf5;
}
.cat-icon svg { width: 24px; height: 24px; display: block; }

/* Cardul „Toate": icon generat, fără culoare de brand. */
.cat-icon-all {
  background: var(--surface-strong);
  color: var(--text-dim);
}
html:not(.theme-light) .cat-icon-all {
  background: #0f1427;
}
.cat-icon-all svg { width: 22px; height: 22px; }

.cat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cat-name { font-weight: 600; font-size: 1.05rem; }
.cat-count { color: var(--text-faint); font-size: 0.8rem; }

/* ---------- Debug (Setări → Debug, doar DEV) ---------- */
.debug-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px; /* 10px + gap-ul panoului (12px) = 22px până la cardurile de sub subtaburi */
}
.debug-tab {
  appearance: none;
  flex: 1;
  min-width: 0; /* taburile strict egale, indiferent de text */
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  padding: 7px 10px;
  /* Rotunjirea subtaburilor, ajustabilă din Debug → General → Rotunjire („Subtaburi"). */
  border-radius: var(--dbg-debug-tab-radius, 999px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.debug-tab:hover { background: var(--surface-hover); color: var(--text); }
.debug-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
/* Corpul unui card de grup: stepper-ele stau pe rânduri care se împachetează. */
.debug-card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
/* Stepper pe coloană, cu eticheta sub input (ex. „Pad. T"). */
.debug-step-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px; /* eticheta mică puțin mai jos față de input */
}
.debug-step-sub {
  font-size: 0.68rem;
  color: var(--text-faint);
  white-space: nowrap;
}
.debug-step {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.debug-step-btn {
  width: 24px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.debug-step-btn:first-child { border-radius: 6px 0 0 6px; }
.debug-step-btn:last-child { border-radius: 0 6px 6px 0; }
.debug-step-btn:hover { border-color: var(--accent); color: var(--text); z-index: 1; }
.debug-step input {
  width: 44px;
  height: 26px; /* egal cu butoanele − / + */
  margin: 0 -1px; /* lipim inputul de butoane (bordurile se suprapun) */
  padding: 0 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-size: 0.85rem;
  text-align: center;
}
.debug-step input:focus { border-color: var(--accent); outline: none; z-index: 1; position: relative; }
/* Fără săgețile spinner-ului: valoarea stă centrată. */
.debug-step input::-webkit-outer-spin-button,
.debug-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.debug-step input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.debug-px {
  font-size: 0.72rem;
  color: var(--text-faint);
}

/* ---------- Contacte ---------- */
/* Grilă cu nr. de carduri pe rând ajustabil din Debug → Detalii → Altele
   („Carduri contacte pe rând"); implicit 1 (o coloană, ca înainte).
   Distanța dintre carduri vine din Debug → Carduri → „Distanța" (--dbg-cat-gap),
   ca la cardurile din Home și din Proiecte. */
.contact-list {
  display: grid;
  grid-template-columns: repeat(var(--dbg-contact-cols, 1), minmax(0, 1fr));
  gap: var(--dbg-cat-gap, 12px);
}
/* Pe mobil contactele sunt mereu 1 pe rând, indiferent de Debug. */
@media (max-width: 639px) {
  .contact-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Padding-ul cardului: Debug → Carduri → „Carduri" (--dbg-cat-pad). */
  padding: var(--dbg-cat-pad, 18px 8px);
  user-select: none;
  -webkit-user-select: none;
}
.contact-card:hover { border-color: var(--accent); }

.contact-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  overflow: hidden;
}
.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-body { flex: 1; min-width: 0; }
.contact-name {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-email {
  color: var(--text-dim);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.contact-shared {
  color: var(--text-faint);
  font-size: 0.76rem;
  margin-top: 2px;
}

/* Nota „Partajat cu …" din detalii (deasupra datei). */
.shared-with-note {
  color: var(--text-dim);
  font-size: 0.82rem;
  text-align: center;
  margin: 2px 0 0;
  line-height: 1.5;
}
.contact-actions { display: flex; gap: 4px; flex: none; }

/* Stil compact pentru lista de contacte. */
html.compact .contact-list { gap: 0; }
html.compact .contact-card {
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 9px 8px;
}
html.compact .contact-card + .contact-card { border-top-color: var(--border); }
html.compact .contact-card:hover { border-color: transparent; }
html.theme-light.compact .contact-card { background: #ffffff; }

/* ---------- Proiecte ---------- */
/* Cardurile de proiect folosesc ACEEAȘI ajustări ca cardurile din Home
   (Debug → Carduri: Container / Carduri / Distanța), plus numărul de carduri
   pe rând (Debug → Detalii → Altele → „Carduri proiecte pe rând"). */
.project-list {
  display: grid;
  grid-template-columns: repeat(var(--dbg-project-cols, 3), minmax(0, 1fr));
  gap: var(--dbg-cat-gap, 12px);
}
/* Pe mobil proiectele sunt mereu 1 pe rând, indiferent de Debug. */
@media (max-width: 639px) {
  .project-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Un proiect = card cu avatar + nume + nr. de elemente (elementele lui se
   deschid în lista standard de elemente, la click pe card). Aceeași structură
   ca la cardurile de contacte: avatar, corp flexibil, acțiuni; padding-ul vine
   din Debug → Carduri → „Carduri" (--dbg-cat-pad), ca la cardurile din Home. */
.project-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--dbg-cat-pad, 18px 8px);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* La fel ca la cardurile de elemente / contacte: border-ul de hover = border-ul
   actual, deschis puțin (mix cu alb); în light, mai ÎNCHIS. */
.project-card:hover { border-color: color-mix(in srgb, var(--border), white 30%); }
html.theme-light .project-card:hover { border-color: color-mix(in srgb, var(--border), black 30%); }

/* Avatarul proiectului folosește clasele elementelor (.avatar / .avatar.img),
   deci rotunjirea, mărimea și gradientul sunt identice cu avatarurile din listă
   (inclusiv mărirea de pe mobil). Aici nu se definesc stiluri proprii. */
.project-body { flex: 1; min-width: 0; }
.project-name {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-count {
  color: var(--text-faint);
  font-size: 0.76rem;
  margin-top: 2px;
}
.project-actions { display: flex; gap: 4px; flex: none; }

/* Elementele proiectului NU se listează pe pagina de proiecte: cardul e doar
   o intrare către lista filtrată (vezi #project-list .project-card). */

/* Modalele mici (proiect / contact) au butoane de acțiuni mai înguste pe
   orizontală și cu font mai mic, ca rândul să nu domine modalul; padding-ul
   vertical vine din ajustarea comună de mai jos. */
#project-form .modal-actions .btn,
#contact-form .modal-actions .btn {
  padding-left: 14px;
  padding-right: 14px;
  font-size: 0.88rem;
}
/* Spațiul dintre ultimul câmp și rândul de butoane e IDENTIC în ambele modale:
   marginea de 14px a câmpului + 28px aici = 42px. */
#project-form .modal-actions,
#contact-form .modal-actions { margin-top: 28px; }

/* TOATE butoanele din rândurile de acțiuni (orice modal: confirmările de
   ștergere, alegerea tipului la adăugare, partajare, iconuri, PIN etc.) au
   padding-ul vertical ajustabil din Debug → General → Altele
   („Padding sus butoane" / „Padding jos butoane"); pe orizontală rămâne
   padding-ul fiecărui context (14px la proiect/contact, 18px restul). */
.modal-actions .btn {
  padding-top: var(--dbg-btn-pad-t, 9px);
  padding-bottom: var(--dbg-btn-pad-b, 9px);
}

/* Stil compact pentru pagina de proiecte. */
html.compact .project-card {
  background: none;
  border-color: transparent;
  border-radius: 0;
  padding: 9px 8px;
}
html.compact .project-card:hover { border-color: transparent; }
html.theme-light.compact .project-card { background: #ffffff; }

/* ---------- Modal partajare ---------- */
.share-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
  max-height: 40dvh;
  overflow-y: auto;
}
.share-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}
.share-contact input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}
.share-contact .contact-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.share-contact .contact-name {
  flex: none;
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-contact .contact-email {
  color: var(--text-faint);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Poza de profil a contactului în modalul de partajare (fallback: litera inițială). */
.share-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  overflow: hidden;
}
.share-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* „Nu ai contacte…" în modalul de partajare: aproape de textul de deasupra
   (nu 18px ca hint-urile obișnuite). */
#share-empty { margin-top: 8px; }

/* ---------- Indicatoare read-only în detalii. ---------- */
.shared-note {
  color: var(--text-faint);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 2px 0 0;
  text-align: center;
}

/* Iconul din antetul detaliilor: mai mare, centrat de wrapper (inline-flex). */
.detail-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
}
/* Favicon descărcat în antetul detaliilor: același stil ca avatarul din listă
   (.avatar.img.fav) — fundal alb + padding în interior, iconul micsorat. */
.detail-icon-img.fav {
  width: 30px;
  height: 30px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
}

/* ---------- Ecran: instalare obligatorie ---------- */
#btn-install-app svg { width: 18px; height: 18px; }

/* ============================================================
   Desktop (ferestre reduse și ecrane late): bara de jos devine
   un sidebar colapsat în stânga, iar seiful devine un layout pe
   două panouri — lista de intrări în stânga, detaliile în dreapta.
   Pe mobil totul rămâne ca înainte.
   ============================================================ */
@media (min-width: 640px) {
  :root {
    --sidebar-w: 4rem;
    --list-w: 300px;
    --settings-w: 200px;
  }

  /* ---- Sidebar colapsat (doar iconițe) ---- */
  .bottom-bar {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: var(--sidebar-w);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* Distanța dintre iconurile din sidebar — ajustabilă din Debug → General →
       Altele („Distanța iconuri sidebar"); implicit 10px (0.625rem). */
    gap: var(--dbg-sidebar-gap, 10px);
    padding: 1rem 0.375rem 0.875rem;
    border-top: none;
    border-right: 1px solid var(--border);
    /* În ferestre JOASE (ex. 500px înălțime), butoanele din sidebar nu mai încap
       toate: îl lăsăm derulabil, ca ultimele (Contacte / Setări) să rămână
       accesibile. Cu conținut care încape, nu se schimbă nimic. */
    overflow-y: auto;
  }

  .bottom-btn {
    min-width: 0;
    width: 3.25rem;
    padding: 0.6875rem 0;
  }
  .bottom-btn span { display: none; }

  /* „Adaugă": deasupra Setărilor, cu același design ca butoanele de navigare. */
  #btn-nav-add { display: flex; }

  /* „Favorite": sub Elemente, vizibil doar pe desktop. */
  #btn-nav-favorites { display: flex; }

  /* „Contacte": în grupul de jos, vizibil doar pe desktop. */
  #btn-nav-contacts { display: flex; }

  /* „Proiecte": sub Favorite, deasupra grupului de jos (＋ / Contacte / Setări). */
  #btn-nav-projects { display: flex; }

  /* Mânerul de resize apare doar pe ecranul seifului (două panouri) și în
     setări. Vizibilitatea e controlată din JS (.resizer-on), fiindcă :has()
     nu se re-evaluează corect la redimensionarea ferestrei în Chromium. */
  .col-resizer.resizer-on { display: block; }

  /* Grupul de jos: „+" deasupra Setărilor, ancorate la baza sidebar-ului. */
  .nav-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbg-sidebar-gap, 10px); /* aceeași distanță ca între iconurile sidebar-ului */
  }

  .side-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.625rem;
    border-radius: 11px;
    color: #c7d2fe;
    background: linear-gradient(140deg, var(--accent), var(--accent-2));
  }
  .side-brand svg { width: 1.25rem; height: 1.25rem; }

  /* ---- Seif: două panouri (listă | detalii) ---- */
  #screen-vault {
    max-width: none;
    margin: 0;
    padding: 0 0 0 var(--sidebar-w);
    height: 100dvh;
    display: grid;
    grid-template-columns: var(--list-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr); /* căutare | listă */
  }

  .vault-toolbar {
    grid-column: 1;
    grid-row: 1;
    /* Padding orizontal identic cu cel al listei: bara de căutare are exact
       lățimea cardurilor de elemente (urmează și ajustările din Debug). */
    padding: 16px var(--dbg-list-hpad-r, 8px) 0 var(--dbg-list-hpad-l, 8px);
    margin: 0 0 12px;
  }

  #entry-list {
    grid-column: 1;
    grid-row: 2;
    overflow-y: auto;
    padding: var(--dbg-list-pad, 0 8px 20px);
    min-height: var(--dbg-list-minh, 0px);
  }

  /* Starea goală a seifului: plasată în grila celor două panouri. Scopul e
     doar #screen-vault — cardul „Niciun contact" (alte ecrane) rămâne full width. */
  #screen-vault .empty {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0 16px;
  }

  /* ---- Panoul din dreapta: placeholder sau detalii ---- */
  #detail-placeholder {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--text-faint);
  }
  #detail-placeholder svg { width: 44px; height: 44px; opacity: 0.65; }
  #detail-placeholder p { margin: 0; font-size: 0.9rem; }

  #screen-detail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc(var(--sidebar-w) + var(--list-w));
    right: 0;
    overflow-y: auto;
  }
  /* Pagina de ADĂUGARE (din Home): umple tot spațiul de la sidebar până la
     capăt (fără coloana de listă), formularul rămâne centrat în interior. */
  #screen-detail.add-page {
    left: var(--sidebar-w);
  }
  #screen-detail .detail-container {
    max-width: none;
    margin: 0;
    min-height: 100%;
    padding: var(--dbg-detail-page-pad, 0 24px 40px);
  }
  #screen-detail .detail-header { padding: var(--dbg-header-pad, 16px 0 12px); }
  /* Alinierea titlului detaliilor (flex-start) e setată global, pentru toate
     lățimile — vezi regula de lângă #screen-detail.editing. */
  /* Fără max-width: conținutul (inclusiv coloanele de linkuri) umple tot
     panoul, și în full screen. */
  #screen-detail .detail-content { max-width: none; }
  #btn-back { display: none; }

  /* ---- Categorii: doar offset pentru sidebar ---- */
  #screen-categories,
  #screen-contacts,
  #screen-projects { padding-left: var(--sidebar-w); }
  /* Categoriile umplu tot spațiul disponibil (nu 760px centrat). */
  #screen-categories .detail-container {
    max-width: none;
    margin: 0;
    padding: var(--dbg-cat-page-pad, 0 24px 40px);
  }
  /* Contactele: la fel ca la Categorii (coloană completă, nu 760px centrat). */
  #screen-contacts .detail-container {
    max-width: none;
    margin: 0;
    padding: var(--dbg-cat-page-pad, 0 24px 40px);
  }
  /* Proiectele: la fel ca la Categorii / Contacte. */
  #screen-projects .detail-container {
    max-width: none;
    margin: 0;
    padding: var(--dbg-cat-page-pad, 0 24px 40px);
  }
  /* Anteturile din Home / Contacte / Detalii umplu toată lățimea secțiunii,
     ca cel din Setări: ies din padding-ul orizontal al containerului, iar
     conținutul lor (titlul) rămâne aliniat cu conținutul de dedesubt.
     Padding-ul top/bottom vine din Debug → General → Antet (--dbg-header-pad),
     identic la toate antetele; aici doar left/right urmează containerul. */
  #screen-categories .detail-header,
  #screen-contacts .detail-header,
  #screen-projects .detail-header,
  #screen-detail .detail-header {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ---- Setări: două panouri (categorii | conținut) ---- */
  .settings-shell {
    max-width: none;
    margin: 0;
    padding: 0 0 0 var(--sidebar-w);
    /* Înălțime fixă: fereastra nu derulează, conținutul derulează în coloana lui.
       Așa taburile stau fixe și comutarea nu mai produce salturi de scroll. */
    height: 100dvh;
    overflow: hidden;
  }
  html.wco .settings-shell {
    height: calc(100dvh - env(titlebar-area-height, 0px));
  }
  .settings-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--settings-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  /* Antetul (săgeata înapoi + titlul) rămâne sus: coloana nu derulează. */
  .settings-cats {
    position: static;
    top: auto;
    z-index: auto;
    flex-direction: column;
    gap: 6px;
    /* Fără padding-top: taburile pornesc la fel de sus ca și conținutul din dreapta. */
    padding: 0 8px 24px 8px;
    background: transparent; /* coloana e alături de conținut, nu trebuie să mascheze nimic */
    align-self: start; /* coloana de taburi rămâne compactă, nu se întinde pe tot rândul */
    min-height: var(--dbg-settings-minh, 0px); /* înălțime minimă ajustabilă (debug) */
  }
  .settings-cat { border-radius: var(--dbg-settings-cat-radius, 10px); text-align: left; padding: var(--dbg-settings-pad, 10px 14px); }
  .settings-content {
    margin-top: 0;
    /* Coloana de conținut derulează intern (fereastra rămâne fixă). */
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none; /* scrollbar invizibilă, ca la lista de elemente */
    /* Fără padding-top propriu: distanța dintre antet și conținut e exact
       „Marginea de jos" a antetului (Debug → General → Antet).
       Fără max-width: conținutul umple tot spațiul, și în full screen. */
    padding: 0 8px 48px 8px;
    max-width: none;
  }

  /* Scrollbar invizibilă (dar funcțională) pe coloana de elemente — și în
     versiunea STANDARD, nu doar compact. Chrome e acoperit de regula globală
     *::-webkit-scrollbar; aici acoperim Firefox. */
  #entry-list {
    scrollbar-width: none;
  }
  /* Modul COMPACT: scrollbar CUSTOM VIZIBILĂ pe lista de elemente — controlată
     din Setări → Aspect („Scrollbar compact", implicit ACTIV). Fără clasa
     compact-scrollbar, se aplică regula de mai sus (scrollbar ascunsă). */
  html.compact.compact-scrollbar #entry-list {
    scrollbar-width: thin;
    scrollbar-color: var(--text-dim) transparent;
  }
  html.compact.compact-scrollbar #entry-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
  }
  html.compact.compact-scrollbar #entry-list::-webkit-scrollbar-track {
    background: transparent;
  }
  html.compact.compact-scrollbar #entry-list::-webkit-scrollbar-thumb {
    background: var(--text-dim);
    border-radius: 4px;
  }
  html.compact.compact-scrollbar #entry-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }
  /* Light mode: aceeași scrollbar cu TRACK ALB (#FFFFFF) și cursorul alb-închis. */
  html.theme-light.compact.compact-scrollbar #entry-list {
    scrollbar-color: #e2e8f0 #ffffff;
  }
  html.theme-light.compact.compact-scrollbar #entry-list::-webkit-scrollbar-track {
    background: #ffffff;
  }
  html.theme-light.compact.compact-scrollbar #entry-list::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
  }
  html.theme-light.compact.compact-scrollbar #entry-list::-webkit-scrollbar-thumb:hover {
    background: #d8dee9;
  }
  #screen-vault {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  #screen-vault::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
  }
  #screen-vault::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }
  #screen-detail {
    scrollbar-width: none;
  }
}

/* Dimensiunea interfeței (Setări → Aspect): pe mobil fix, pe desktop
   scalat cu fereastra (clamp). Clasele ui-small / ui-large se aplică
   din pre-paint (index.html) ca să nu „sară" la încărcare. */
html.ui-small { font-size: 15px; }
html.ui-large { font-size: 17px; }

/* Conținut responsive la fereastră redimensionată (desktop): textul (rem)
   se scalează ușor sub 1080px, ca totul să încapă proporțional în ferestre mici.
   Telefonul (sub 640px) rămâne la dimensiunea normală. */
@media (min-width: 640px) {
  html { font-size: clamp(13px, 0.5vw + 10.5px, 16px); }
  html.ui-small { font-size: clamp(12px, 0.45vw + 9.8px, 15px); }
  html.ui-large { font-size: clamp(14px, 0.6vw + 11.5px, 18px); }
}

/* Ferestre de desktop înguste: coloanele se strâng ca să rămână echilibrate. */
@media (min-width: 640px) and (max-width: 899px) {
  :root {
    --list-w: 230px;
    --settings-w: 170px;
  }
}

/* Ecrane late: dimensiuni mai generoase (sidebar mai lat, coloană mai spațioasă). */
@media (min-width: 960px) {
  :root {
    --sidebar-w: 4.5rem;
    --list-w: 400px;
    --settings-w: 220px;
  }

  .bottom-bar { padding: 1.125rem 0.625rem 0.875rem; }

  .side-brand {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
  }
  .side-brand svg { width: 1.375rem; height: 1.375rem; }

  .vault-toolbar {
    padding: 16px var(--dbg-list-hpad-r, 8px) 0 var(--dbg-list-hpad-l, 8px);
    margin: 0 0 14px;
  }

  #entry-list { padding: var(--dbg-list-pad, 0 8px 24px); }
  #screen-vault .empty { margin: 0 24px; }

  #screen-detail .detail-container { padding: var(--dbg-detail-page-pad, 0 32px 48px); }
  #screen-detail .detail-header { padding: var(--dbg-header-pad, 20px 0 14px); }
  /* La ecrane largi containerul de Detalii are padding 32px: antetul iese
     complet (margin -32px), iar conținutul lui rămâne aliniat (padding 32px). */
  #screen-detail .detail-header {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ============================================================
   Tema light (clasa pe <html>, setată din Aspect / Setări)
   ============================================================ */
html.theme-light {
  --bg-0: #eef1f8;
  --bg-1: #e3e8f3;
  --surface: #ffffff;
  --surface-hover: #f1f4fa;
  --surface-strong: #ffffff;
  --border: rgba(15, 23, 42, 0.13);
  --text: #0f172a;
  --text-dim: #475569;
  --text-faint: #7b87a0;
  --shadow: 0 24px 70px rgba(51, 65, 85, 0.22);
  color-scheme: light;
}

/* Zonele cu culori „hardcodate" care trebuie adaptate la light. */
html.theme-light .field input,
html.theme-light .field textarea {
  background: #f2f5fa;
  border-color: rgba(15, 23, 42, 0.16);
}
html.theme-light .bottom-bar {
  background: rgba(255, 255, 255, 0.88);
}
html.theme-light .modal-overlay {
  background: rgba(30, 41, 59, 0.38);
}
html.theme-light .icon-thumb {
  background: #f2f5fa;
}
html.theme-light .cat-icon-all {
  background: #e8ecf5;
  color: #64748b;
}

/* În tema light, elementele compacte au și ele fundal alb. */
html.theme-light.compact .entry { background: #ffffff; }
html.theme-light.compact #screen-detail .detail-row { background: #ffffff; }
html.theme-light.compact #screen-detail .custom-field-row { background: #ffffff; }
html.theme-light.compact #screen-settings .detail-row { background: #ffffff; }
html.theme-light.compact #screen-settings .settings-block { background: #ffffff; }

/* Light + carduri: cardurile de setări au fundal ALB SOLID, ca formularul
   parolei master (evită nuanțele gri de la translucență: E9EBED / EDEFF0). */
html.theme-light #screen-settings .settings-block,
html.theme-light #screen-settings .detail-row {
  background: #ffffff;
}

/* Light + compact: fundalul PAGINII e alb (FFFFFF) peste tot, iar cardurile
   de deasupra (home, contacte, formular, rânduri) rămân albe. */
html.theme-light.compact #screen-vault,
html.theme-light.compact #screen-detail,
html.theme-light.compact #screen-categories,
html.theme-light.compact #screen-contacts,
html.theme-light.compact #screen-projects,
html.theme-light.compact #screen-settings { background: #ffffff; }

html.theme-light.compact .cat-card { background: #ffffff; }
html.theme-light.compact .contact-card { background: #ffffff; }

/* ============================================================
   Mobil (sub 640px): bara de jos fixă nu acoperă niciodată conținutul —
   spațiu minim de derulare peste tot + antete care umplu toată lățimea.
   Paddingul orizontal al containerelor e UNIFORM (--page-pad) pe toate
   ecranele: Categorii, Contacte, Detalii, Seif, Setări.
   ============================================================ */
@media (max-width: 639px) {
  :root { --page-pad: 12px; }

  /* Spațiu sub conținut: minim înălțimea barei de jos (+ safe-area).
     Home are ACELAȘI padding jos ca restul ecranelor (100px) — nu folosim
     var-ul din Debug (40px implicit), ca să fie egal peste tot. */
  #screen-categories .detail-container {
    padding-bottom: max(100px, calc(5rem + env(safe-area-inset-bottom)));
  }
  #screen-contacts .detail-container {
    padding-bottom: max(100px, calc(5rem + env(safe-area-inset-bottom)));
  }
  #screen-projects .detail-container {
    padding-bottom: max(100px, calc(5rem + env(safe-area-inset-bottom)));
  }
  /* Add/Edit (Personalizare): spațiu MAI MARE jos — formularul nu se mai
     termină direct în bara de butoane. */
  #screen-detail .detail-container {
    padding-bottom: max(var(--dbg-detail-page-pad-b, 140px), calc(8.5rem + env(safe-area-inset-bottom)));
  }
  html.compact #screen-detail .detail-container {
    padding-bottom: max(var(--dbg-detail-page-pad-compact-b, 140px), calc(8.5rem + env(safe-area-inset-bottom)));
  }
  /* Seif: spațiu MAI MARE sub ultimul element — între el și bara de jos. */
  #screen-vault {
    padding-bottom: max(140px, calc(8.5rem + env(safe-area-inset-bottom)));
  }
  .settings-shell {
    padding-bottom: max(100px, calc(5rem + env(safe-area-inset-bottom)));
  }

  /* Padding orizontal IDENTIC pe toate ecranele (--page-pad). Suprascrie
     valorile diferite: Debug 24px la Categorii/Detalii, 20px la Seif/Setări. */
  #screen-categories .detail-container,
  #screen-contacts .detail-container,
  #screen-projects .detail-container,
  #screen-detail .detail-container,
  html.compact #screen-detail .detail-container,
  #screen-vault,
  .settings-shell {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  /* Antetele ies din paddingul orizontal al containerului (--page-pad) și
     umplu toată lățimea ecranului; titlul rămâne aliniat cu conținutul. */
  #screen-categories .detail-header,
  #screen-detail .detail-header,
  #screen-contacts .detail-header,
  #screen-projects .detail-header,
  .settings-shell .detail-header {
    margin-left: calc(0px - var(--page-pad));
    margin-right: calc(0px - var(--page-pad));
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }
}
@media (max-width: 560px) {
  /* Ferestre foarte înguste: același padding (--page-pad) ca peste tot. */
  :root { --page-pad: 12px; }
}

/* Mobil: cardurile din lista de elemente (Seif) mai mari — icon, titlu și
   textul de sub (e-mail / detalii) cresc împreună cu spațierea internă. */
@media (max-width: 639px) {
  .entry { gap: 14px; padding: 14px 14px; }
  .avatar { width: 2.9rem; height: 2.9rem; border-radius: 14px; font-size: 1.2rem; }
  .entry-title { font-size: 1.1rem; }
  .entry-email { font-size: 0.92rem; margin-top: 2px; }
  .pw-text { font-size: 0.95rem; }
}