/* ── Compte utilisateur ────────────────────────────────────────── */
.account-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: .35rem .7rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: .82rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.account-btn:hover { background: var(--surface); border-color: var(--text); }
.account-btn.logged-in { border-color: var(--accent); color: var(--accent); }
.account-btn svg { flex-shrink: 0; }
#accountBtnLabel { white-space: nowrap; }

.account-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.account-modal-overlay[hidden] { display: none; }
.account-modal {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: var(--shadow-card);
  font-family: var(--sans);
}
.account-modal h2 {
  margin: 0 0 .3rem;
  font-size: 1.3rem;
  font-family: var(--serif);
}
.account-subtitle { color: var(--muted); font-size: .85rem; margin: 0 0 1.2rem; }
.account-modal-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}
.account-modal-close:hover { color: var(--text); }
.account-field { margin-bottom: .9rem; }
.account-field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--text);
}
.account-field input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  font-size: .9rem;
  font-family: var(--sans);
  background: var(--field);
  color: var(--text);
  box-sizing: border-box;
}
.account-field input::placeholder { color: var(--field-ph); }
.account-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.account-password-field { -webkit-text-security: disc; text-security: disc; }
.account-error { color: #e53935; font-size: .82rem; margin: .5rem 0; }
.account-submit {
  width: 100%;
  padding: .6rem;
  background: var(--accent);
  color: var(--badge-fg);
  border: none;
  border-radius: var(--radius-btn);
  font-size: .9rem;
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.account-submit:hover { opacity: .85; }
.account-submit:disabled { opacity: .5; cursor: not-allowed; }
.account-switch { text-align: center; font-size: .82rem; margin-top: 1rem; color: var(--muted); }
.account-switch a { color: var(--link); text-decoration: none; }
.account-switch a:hover { text-decoration: underline; }
.account-profile-info { margin: 1rem 0; }
.account-email { color: var(--muted); font-size: .85rem; }
.account-sync-section { margin: 1rem 0; }
.account-sync-status { font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.account-modal hr { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }
.account-logout {
  width: 100%;
  padding: .55rem;
  background: none;
  border: 1px solid #e53935;
  color: #e53935;
  border-radius: var(--radius-btn);
  font-size: .85rem;
  font-family: var(--sans);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.account-logout:hover { background: #e53935; color: #fff; }
.account-secondary {
  background: var(--surface2);
  color: var(--text);
  margin-bottom: .5rem;
}
.account-secondary:hover { opacity: .8; }
.account-verify-badge {
  font-size: .78rem;
  margin-top: .4rem;
  padding: .25rem .6rem;
  border-radius: 4px;
  display: inline-block;
}
.account-verify-badge.verified { background: var(--ok, #2a7a4a); color: #fff; }
.account-verify-badge.not-verified { background: #e5393522; color: #e53935; }
.account-verify-badge a { color: inherit; text-decoration: underline; }
.account-role-badge {
  font-size: .78rem;
  margin-top: .4rem;
  padding: .25rem .6rem;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--border);
}
.account-role-badge.admin {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.account-role-badge.standard {
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--muted);
}
.account-success { color: var(--ok, #2a7a4a); font-size: .82rem; margin: .5rem 0; }

/* ── Edit name ── */
.account-name-row { display: flex; align-items: center; gap: .4rem; }
.account-edit-name-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 1rem; padding: .1rem .3rem; line-height: 1; border-radius: 4px;
  transition: color .2s, background .2s;
}
.account-edit-name-btn:hover { color: var(--accent); background: var(--surface, #f0f0f0); }
.account-edit-name-row {
  display: flex; gap: .3rem; align-items: center; margin: .4rem 0;
}
.account-edit-name-input {
  flex: 1; padding: .4rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius-input, 6px); font-size: .85rem;
  font-family: var(--sans); background: var(--field); color: var(--text);
  box-sizing: border-box;
}
.account-edit-name-input:focus { outline: none; border-color: var(--accent); }
.account-edit-name-save {
  background: var(--accent); color: var(--badge-fg, #fff); border: none;
  border-radius: var(--radius-btn, 6px); padding: .4rem .7rem;
  font-size: .82rem; font-weight: 600; cursor: pointer;
}
.account-edit-name-save:hover { opacity: .85; }
.account-edit-name-cancel {
  background: none; border: none; color: var(--muted); font-size: 1.2rem;
  cursor: pointer; padding: .1rem .3rem; line-height: 1;
}
.account-edit-name-cancel:hover { color: var(--text); }

/* ── Stats ── */
.account-stats { margin: 1rem 0; }
.account-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .5rem; margin-bottom: .8rem;
}
.account-stat {
  background: var(--surface, #f5f5f5); border-radius: 8px;
  padding: .6rem .8rem; text-align: center;
}
.account-stat-label { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .03em; }
.account-stat-value { display: block; font-size: .95rem; font-weight: 600; color: var(--text); }
.account-stats-grid .account-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

.account-storage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem .9rem;
  margin-bottom: .8rem;
}
.account-storage-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .5rem;
}
.account-storage-row .account-stat-label { margin-bottom: 0; }
.account-storage-row .account-stat-value { font-family: 'DM Mono', monospace; font-size: .82rem; }
.account-storage-bar {
  width: 100%;
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
.account-storage-bar-fill {
  height: 100%;
  width: 0;
  background: var(--ok);
  transition: width .3s;
}
.account-storage-bar-fill.warn { background: #e8a53a; }
.account-storage-bar-fill.over { background: #c8391a; }

.account-usage-details { margin-top: .5rem; }
.account-usage-details summary {
  font-size: .82rem; color: var(--muted); cursor: pointer;
  user-select: none; padding: .3rem 0;
}
.account-usage-details summary:hover { color: var(--text); }
.account-usage-list { padding: .4rem 0; }
.account-usage-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .3rem 0; font-size: .82rem; border-bottom: 1px solid var(--border);
}
.account-usage-item:last-child { border-bottom: none; }
.account-usage-count { font-weight: 600; color: var(--accent); }
.account-usage-empty { font-size: .82rem; color: var(--muted); font-style: italic; margin: .3rem 0; }

/* ── Delete account ── */
.account-delete {
  width: 100%; padding: .45rem; background: none;
  border: 1px solid var(--muted); color: var(--muted);
  border-radius: var(--radius-btn); font-size: .78rem;
  font-family: var(--sans); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  margin-top: .5rem;
}
.account-delete:hover { border-color: #e53935; color: #e53935; }
.account-delete-warning { color: #e53935; font-weight: 500; }
.account-delete-confirm {
  width: 100%; padding: .6rem; background: #e53935; color: #fff;
  border: none; border-radius: var(--radius-btn); font-size: .9rem;
  font-family: var(--sans); font-weight: 600; cursor: pointer;
}
.account-delete-confirm:hover { opacity: .85; }
.account-delete-confirm:disabled { opacity: .5; cursor: not-allowed; }