/* ============================================================
   Account Center (profile.html) — layout, cards & animations
   Relies on variables.css, home.css (navbar) and account.css.
   ============================================================ */

.profile-main {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--navbar-height) + var(--spacing-2xl)) var(--spacing-lg) var(--spacing-3xl);
  background:
    radial-gradient(1100px 480px at 50% -200px, rgba(0, 113, 227, 0.08), transparent 70%),
    var(--color-bg-primary);
}

.profile-shell {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
}

/* ---- Page header ---- */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.profile-head__avatar {
  width: 64px;
  height: 64px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-gradient);
  color: #fff;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  box-shadow: var(--shadow-glow);
}

.profile-head__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}
.profile-head__subtitle {
  margin-top: 4px;
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
}

/* ---- Two-column layout ---- */
.profile-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

/* ---- Sidebar nav ---- */
.profile-nav {
  position: sticky;
  top: calc(var(--navbar-height) + var(--spacing-lg));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-sm);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

.profile-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.profile-nav__item svg { width: 18px; height: 18px; flex: none; }

.profile-nav__item:hover { background: rgba(0, 0, 0, 0.04); color: var(--color-text-primary); }

.profile-nav__item.is-active {
  background: rgba(0, 113, 227, 0.1);
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-semibold);
}
.profile-nav__item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-gradient);
}

.profile-nav__item--danger.is-active {
  background: rgba(255, 59, 48, 0.1);
  color: var(--color-error);
}
.profile-nav__item--danger.is-active::before { background: var(--color-error); }
.profile-nav__item--danger:hover { color: var(--color-error); }

/* ---- Panels ---- */
.profile-panel { display: none; }
.profile-panel.is-active {
  display: block;
  animation: panelIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Cards ---- */
.acc-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}
.acc-card:last-child { margin-bottom: 0; }

.profile-panel.is-active .acc-card {
  animation: cardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.profile-panel.is-active .acc-card:nth-child(2) { animation-delay: 0.06s; }
.profile-panel.is-active .acc-card:nth-child(3) { animation-delay: 0.12s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.acc-card--danger { border-color: rgba(255, 59, 48, 0.35); background: rgba(255, 59, 48, 0.02); }

.acc-card__head { margin-bottom: var(--spacing-lg); }
.acc-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.acc-card__desc { margin-top: 4px; font-size: var(--font-size-sm); color: var(--color-text-tertiary); line-height: var(--line-height-normal); }

/* Identity card */
.acc-card__identity { display: flex; align-items: center; gap: var(--spacing-lg); }
.acc-card__avatar {
  width: 76px;
  height: 76px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-gradient);
  color: #fff;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  overflow: hidden;   /* clip an uploaded photo to the circle */
}
.acc-card__identity-text { min-width: 0; }

/* Uploaded avatar photo — fills the circular holder on every avatar size. */
.profile-head__avatar, .acc-photo__preview { overflow: hidden; }
.acc-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Profile photo card */
.acc-photo { display: flex; align-items: center; gap: var(--spacing-lg); flex-wrap: wrap; }
.acc-photo__preview {
  width: 72px; height: 72px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-gradient);
  color: #fff; font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.acc-photo__actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }

/* ── Circular crop modal ─────────────────────────────────────── */
.acc-crop {
  position: fixed; inset: 0; z-index: var(--z-modal, 1000);
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-lg);
  opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base);
}
.acc-crop.is-open { opacity: 1; visibility: visible; }
.acc-crop__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); }
.acc-crop__card {
  position: relative; z-index: 1;
  width: min(340px, 100%);
  background: var(--color-bg-primary, #fff);
  border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
  border-radius: var(--radius-lg); padding: var(--spacing-xl);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,0.28));
  transform: translateY(12px) scale(0.98); transition: transform var(--transition-smooth);
}
.acc-crop.is-open .acc-crop__card { transform: none; }
.acc-crop__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.acc-crop__hint { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin: 6px 0 var(--spacing-lg); line-height: 1.5; }
.acc-crop__stage {
  position: relative; width: 260px; height: 260px; max-width: 100%;
  margin: 0 auto; border-radius: var(--radius-md);
  overflow: hidden; background: #1c1c1e;
  touch-action: none; cursor: grab; user-select: none;
}
.acc-crop__stage:active { cursor: grabbing; }
.acc-crop__img { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; max-width: none; }
.acc-crop__ring {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.acc-crop__zoom { display: flex; align-items: center; gap: var(--spacing-sm); margin: var(--spacing-lg) 0 var(--spacing-md); }
.acc-crop__zoom-ic { color: var(--color-text-tertiary); font-size: var(--font-size-lg); width: 16px; text-align: center; }
.acc-crop__zoom input[type="range"] { flex: 1; accent-color: var(--color-accent-primary, #0071e3); cursor: pointer; }
.acc-crop__actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); }
.acc-crop__actions .is-loading { opacity: 0.7; pointer-events: none; }
.acc-card__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.acc-card__email { margin-top: 2px; font-size: var(--font-size-sm); color: var(--color-text-tertiary); word-break: break-all; }
.acc-card__badge {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(0, 113, 227, 0.1);
  color: var(--color-accent-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Fields */
.acc-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.acc-field__value { font-size: var(--font-size-base); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.acc-field--edit { flex-wrap: wrap; }
.acc-field__actions { display: flex; gap: var(--spacing-sm); }

.acc-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.acc-label:not(:first-child) { margin-top: var(--spacing-lg); }

.acc-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.acc-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
.acc-field--edit .acc-input { flex: 1; min-width: 200px; }

.acc-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* Password strength meter */
.acc-strength { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.acc-strength__bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}
.acc-strength__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width var(--transition-base), background var(--transition-base);
}
.acc-strength__fill.is-weak   { width: 33%;  background: var(--color-error); }
.acc-strength__fill.is-medium { width: 66%;  background: var(--color-warning); }
.acc-strength__fill.is-strong { width: 100%; background: var(--color-success); }
.acc-strength__label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); min-width: 54px; }

/* Avatar colour swatches */
.acc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}
.acc-swatch {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform var(--transition-bounce);
}
.acc-swatch:hover { transform: scale(1.12); }
.acc-swatch.is-active { transform: scale(1.08); }
.acc-swatch.is-active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--color-accent-primary);
}
.acc-swatch.is-active::before {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* Danger list + checkbox */
.acc-warnlist {
  margin: 0 0 var(--spacing-lg);
  padding-left: var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.acc-warnlist li { margin-bottom: var(--spacing-2xs); }

.acc-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.acc-checkbox input { width: 16px; height: 16px; accent-color: var(--color-error); cursor: pointer; }

/* ---- Storage panel ---- */
.acc-card__head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.stor-refresh {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stor-refresh svg { width: 15px; height: 15px; }
.stor-refresh.is-loading { pointer-events: none; opacity: 0.7; }
.stor-refresh.is-loading svg { animation: storSpin 0.8s linear infinite; }

.stor-state {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) 0 var(--spacing-2xs);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}
/* The `hidden` attribute must win over `display: flex` above, otherwise the
   loading/error states stay on screen even after the content is shown. */
.stor-state[hidden] { display: none; }
.stor-state--error { color: var(--color-error); }
.stor-state--error svg { flex: none; }

.stor-spinner {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: storSpin 0.8s linear infinite;
}
@keyframes storSpin { to { transform: rotate(360deg); } }

.stor-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}
.stor-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--glass-border);
}
.stor-tile__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-tight);
}
.stor-tile__value--sm { font-size: var(--font-size-lg); }
.stor-tile__unit {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}
.stor-tile__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stor-bar {
  display: flex;
  height: 12px;
  width: 100%;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-bg-tertiary);
  margin-bottom: var(--spacing-lg);
}
.stor-bar__seg { height: 100%; min-width: 3px; transition: width var(--transition-base); }
.seg--pdf   { background: #ff5a5f; }
.seg--image { background: #0071e3; }
.seg--doc   { background: #34c759; }
.seg--txt   { background: #ff9f0a; }
.seg--other { background: #8e8e93; }

.stor-breakdown {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.stor-breakdown__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.stor-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.stor-breakdown__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.stor-breakdown__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.stor-breakdown__size {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}
.stor-empty {
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-lg) 0 var(--spacing-2xs);
}

@media (max-width: 560px) {
  .acc-card__head--row { flex-direction: column; align-items: stretch; }
  .stor-refresh { align-self: flex-end; }
}

/* ---- Footer spacing ---- */
.profile-page .footer { margin-top: var(--spacing-2xl); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .profile-layout { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .profile-nav {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .profile-nav::-webkit-scrollbar { display: none; }
  .profile-nav__item {
    /* Keep each pill at its natural width and let the row scroll — without this
       the 7 items squeeze into the viewport and the icon/label overlap. */
    flex: 0 0 auto;
    white-space: nowrap;
    justify-content: center;
    padding: var(--spacing-2xs) var(--spacing-sm);
    gap: var(--spacing-2xs);
  }
  .profile-nav__item svg { width: 16px; height: 16px; }
  .profile-nav__item.is-active::before { display: none; }
}

@media (max-width: 480px) {
  .profile-main { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
  .profile-head { gap: var(--spacing-md); }
  .profile-head__avatar { width: 52px; height: 52px; font-size: var(--font-size-xl); }
  .profile-head__title { font-size: var(--font-size-2xl); }
  .acc-card { padding: var(--spacing-lg); }
  .acc-card__identity { flex-direction: column; text-align: center; }
  .acc-card__email { word-break: break-all; }
  .acc-card__actions { flex-direction: column; }
  .acc-card__actions .acc-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-panel.is-active,
  .profile-panel.is-active .acc-card { animation: none !important; }
}

/* ============================================================
   Notification toggles (Notifications tab)
   ============================================================ */
.acc-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  cursor: pointer;
  border-top: 1px solid var(--color-border);
}
.acc-toggle:first-of-type { border-top: none; }
.acc-toggle__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.acc-toggle__label { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.acc-toggle__hint { font-size: var(--font-size-sm); color: var(--color-text-tertiary); line-height: var(--line-height-normal); }
.acc-toggle__input { position: absolute; opacity: 0; pointer-events: none; }
.acc-toggle__switch {
  flex: none;
  width: 46px; height: 27px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  position: relative;
  transition: background var(--transition-base);
}
.acc-toggle__switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-bounce);
}
.acc-toggle__input:checked + .acc-toggle__switch { background: var(--color-accent-primary); }
.acc-toggle__input:checked + .acc-toggle__switch::after { transform: translateX(19px); }
.acc-toggle__input:focus-visible + .acc-toggle__switch { box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.3); }

/* ============================================================
   My Community posts (My Community tab)
   ============================================================ */
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.pc-stat { text-align: center; padding: var(--spacing-sm); border-radius: var(--radius-md); background: var(--color-bg-secondary); }
.pc-stat__num { display: block; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.pc-stat__label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }

/* Clickable stat tiles (My network tabs) */
.pc-stat--tab {
  border: 1px solid transparent; cursor: pointer; font: inherit;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.pc-stat--tab:hover { background: var(--color-surface-glass-hover, var(--color-bg-secondary)); }
.pc-stat--tab:active { transform: scale(0.97); }
.pc-stat--tab.is-active { border-color: var(--color-accent-primary); background: rgba(0, 113, 227, 0.08); }
.pc-stat--tab.is-active .pc-stat__num { color: var(--color-accent-primary); }
.pc-stat--tab:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }

.pc-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.pc-empty { color: var(--color-text-tertiary); font-size: var(--font-size-sm); padding: var(--spacing-md) 0; }
.pc-blank { text-align: center; padding: var(--spacing-2xl) var(--spacing-md); color: var(--color-text-tertiary); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); }

.pc-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.pc-item:hover { border-color: var(--color-border-hover); transform: translateY(-1px); }
.pc-item__main { flex: 1; min-width: 0; }
.pc-item__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.pc-badge { font-size: 11px; font-weight: var(--font-weight-semibold); padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.pc-badge--solved { background: rgba(52,199,89,0.14); color: #1f9d4d; }
.pc-badge--open { background: rgba(255,149,0,0.13); color: #c9760a; }
.pc-badge--pin { background: rgba(255,149,0,0.14); color: #c9760a; }
.pc-item__title { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); text-decoration: none; line-height: 1.35; }
.pc-item__title:hover { color: var(--color-accent-primary); }
.pc-item__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.pc-item__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pc-del {
  width: 38px; height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.pc-del:hover { border-color: var(--color-error); color: var(--color-error); background: rgba(255,59,48,0.06); }

/* My reports history */
.pc-reports { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.pc-report { padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); }
.pc-report__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pc-report__excerpt { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin-bottom: 6px; overflow-wrap: anywhere; }
.pc-report__meta { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.pc-badge--reason { background: rgba(255, 59, 48, 0.1); color: #d92c22; }
.pc-badge--dismissed { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); }

@media (max-width: 640px) {
  .pc-item { flex-direction: column; align-items: stretch; }
  .pc-item__actions { justify-content: flex-end; }
}

/* ── Network / blocked member rows ─────────────────────────── */
.pc-follow {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  background: var(--color-bg-secondary); transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.pc-follow:hover { transform: translateY(-1px); border-color: var(--color-border-hover, var(--glass-border-hover)); }
.pc-follow__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); box-shadow: var(--shadow-sm);
}
.pc-follow__name { flex: 1; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-follow__actions { display: flex; gap: 6px; flex: none; }
.acc-btn--sm { padding: 6px 12px; font-size: var(--font-size-xs); }

/* ── Textarea + tag input (messaging profile) ──────────────── */
.acc-textarea { resize: vertical; min-height: 60px; line-height: 1.5; font-family: inherit; }
.pc-taginput {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--color-bg-secondary);
}
.pc-taginput input { flex: 1; min-width: 140px; border: none; background: transparent; outline: none; font-family: inherit; font-size: var(--font-size-sm); color: var(--color-text-primary); padding: 4px; }
.pc-tagpill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px;
  background: rgba(0,113,227,0.1); color: var(--color-accent-primary); border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}
.pc-tagpill button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0.7; }
.pc-tagpill button:hover { opacity: 1; }

@media (max-width: 560px) {
  .pc-follow { flex-wrap: wrap; }
  .pc-follow__actions { width: 100%; justify-content: flex-end; }
}