/* Account security panel and privacy consent (studio and admin). */

.account-button { position: relative; }
.account-button.has-alert::after,
#mobile-account.has-alert::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pop, #f2741f);
  box-shadow: 0 0 0 2px var(--panel, #fff);
}
#mobile-account { position: relative; }
.auth-forgot { margin-top: 2px; font-size: 13px; opacity: 0.85; }
.privacy-manage { margin-top: 6px; font-size: 13px; padding: 0; }

.account-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--line, #e6def8);
  border-radius: 22px;
  background: var(--panel, #fff);
  color: var(--text, #2a2342);
  box-shadow: var(--pop-shadow, 0 20px 48px #0002);
}
.account-dialog::backdrop { background: var(--overlay, #2a234280); backdrop-filter: blur(2px); }
.account-dialog h2 { margin: 4px 0 14px; font-size: 24px; }
.account-dialog h3 { margin: 20px 0 8px; font-size: 14px; color: var(--muted, #665f82); font-weight: 600; }
.account-dialog .dialog-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: var(--raised, #f4f0ff); color: var(--text); font-size: 20px; cursor: pointer;
}
.account-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  border-radius: 14px; background: var(--raised, #f4f0ff);
}
.account-tabs button {
  flex: 1; padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted, #665f82); font: inherit; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.account-tabs button.active { background: var(--panel, #fff); color: var(--accent, #6b4ce6); box-shadow: var(--card-shadow, 0 1px 2px #0001); }
.account-form { display: grid; gap: 12px; }
.account-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.account-form input {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--input, #faf8ff); color: var(--text); font: inherit;
}
.account-form input:focus { outline: 2px solid var(--accent-soft, #efeaff); border-color: var(--accent); }
.account-help { margin: 0; color: var(--muted, #665f82); font-size: 13px; line-height: 1.6; }
.account-error { min-height: 1em; margin: 0; color: var(--danger, #c2410c); font-size: 13px; }
.account-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

.privacy-status {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised, #f4f0ff);
}
.privacy-status > button { grid-column: 1 / -1; justify-self: start; }
.privacy-status strong { display: block; margin-bottom: 4px; }
.privacy-status p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.privacy-dot { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--success, #2f7a52); }
.privacy-status.open .privacy-dot { background: var(--pop, #f2741f); }
.privacy-request {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px; margin-bottom: 8px; border: 1px solid var(--strong-line, #cbbcf8); border-radius: 14px;
}
.privacy-request p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.privacy-request-actions { display: flex; gap: 8px; }
.privacy-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.privacy-history li {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px;
  border-bottom: 1px dashed var(--soft-line, #efe9ff); font-size: 13px;
}
.privacy-history time { color: var(--muted); white-space: nowrap; }

.account-sessions { display: grid; gap: 8px; margin-top: 12px; }
.session-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
}
.session-row.current { border-color: var(--strong-line, #cbbcf8); background: var(--accent-soft, #efeaff); }
.session-row p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.session-badge {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent, #6b4ce6); color: var(--accent-ink, #fff); font-size: 11px; font-weight: 600;
}

.privacy-banner {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  max-width: calc(100vw - 32px); padding: 12px 16px; border: 1px solid var(--strong-line);
  border-radius: 16px; background: var(--panel, #fff); color: var(--text);
  box-shadow: var(--pop-shadow, 0 20px 48px #0002);
  animation: account-rise 0.25s ease-out;
}
@keyframes account-rise { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 720px) {
  .account-dialog { padding: 22px 18px; }
  .privacy-banner { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .privacy-banner { animation: none; } }

[data-ui="kids"] .mobile-nav #mobile-account { --icon: "🔒"; }