.resume-card-delete-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0 !important;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
  color: var(--danger);
}
.resume-card-delete-btn svg path {
  fill: var(--danger);
}
html.dark-theme .resume-card-delete-btn {
  background: #1f1f29;
}
html.dark-theme .resume-card {
  border-color: #32323E;
}

.resume-list-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}
.resume-list-spinner.hidden {
  display: none;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--surface-secondary);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@media (max-width: 1279px) {
  .resume-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 12px;
    border-radius: 14px !important;
  }
  .resume-card-content-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .resume-card-actions-wrapper {
    width: 100%;
    align-items: stretch;
  }
  .resume-card-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .resume-card-actions {
    width: 100%;
    justify-content: space-between;
  }
  .resume-card-action-btn,
  .resume-card-menu-btn {
    flex: 1;
    justify-content: center;
  }
  .resume-card-menu-wrapper {
    flex: 0 0 auto;
    display: flex;
  }
  .resume-card-shell {
    padding: 0 2px 2px;
    border-radius: 16px;
  }
  .resume-card-shell-header {
    padding: 8px 14px;
    border-radius: 14px 14px 0 0;
  }
}


@media (max-width: 360px) {
  .resume-card-actions {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
  }


  .resume-card-actions > .btn,
  .resume-card-actions > .resume-card-menu-wrapper {
    flex: 1 1 calc((100% - 16px) / 3);
    min-width: 0;
  }


  .resume-card-menu-btn {
    width: auto;
    min-width: 0;
  }

  .resume-card-menu-wrapper {
    display: flex;
  }

  .resume-card-menu-wrapper .resume-card-menu-btn {
    width: 100%;
    min-width: 0;
  }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Блок подписки в карточке профиля (profile.html, данные — services/profile_stats.py).
   Цвет тарифа — только кольцо, бейдж и заполнение лимитов; переменные тарифа — header-sub-* в 05_empty_states_header.css */
.profile-card-1 {
  --sub-tile: var(--bg-color);
  --sub-track: #E2E2E2;
  --sub-past: #C4C4C4;
  --sub-future: #EBEBEB;
  --sub-seg: #BDBDBD;
  --sub-zone-mid: #FED88E;
  --sub-now: #FF8F4A;
  --sub-warn: #FF7733;
  --sub-warn-text: #E0601C;
  --sub-tip-bg: #1D1E20;
  --sub-tip-text: #FFFFFF;
}
html.dark-theme .profile-card-1 {
  --sub-track: #2A2A2A;
  --sub-past: #3A3A3A;
  --sub-future: #202020;
  --sub-seg: #5A5A5A;
  --sub-warn-text: #FF9A66;
  --sub-tip-bg: #FFFFFF;
  --sub-tip-text: #1D1E20;
}
.profile-sub.header-sub-lite { --sub-seg: #2FD39A; }
.profile-sub.header-sub-plus { --sub-seg: #9D6BFF; }
.profile-avatar-ring.profile-sub-ava {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 21px;
}
.profile-avatar-ring.profile-sub-ava .profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.profile-sub-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.profile-sub-name .profile-name {
  min-width: 0;
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-semibold);
}
.profile-sub-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(110deg, var(--header-sub-badge));
  color: var(--header-sub-badge-text, #FFFFFF);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3px;
}
.profile-sub-warn {
  color: var(--sub-warn-text);
}
/* Строка тарифа под именем переносится, а не обрезается многоточием, как email */
.profile-email.profile-sub-status {
  white-space: normal;
}
.profile-sub-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--text-color);
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 3px;
  cursor: pointer;
}
.profile-sub-link:hover {
  text-decoration-color: currentColor;
}
.profile-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-sub-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.profile-sub-top.is-match-wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.profile-sub-top.is-cv-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.profile-sub-tile {
  min-width: 0;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--sub-tile);
}
.profile-sub-tile--chart {
  display: flex;
  flex-direction: column;
}
/* Подпись под графиком прижата к низу, если соседняя плитка выше */
.profile-sub-tile--chart > .profile-sub-note {
  margin-top: auto;
  padding-top: 12px;
}
.profile-sub-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.profile-sub-label {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--text-muted);
}
.profile-sub-value {
  margin: 6px 0 0;
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  font-weight: var(--fw-medium);
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}
.profile-sub-value small {
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.profile-sub-value--hint {
  font-size: var(--fs-17);
  line-height: var(--lh-17);
  font-weight: var(--fw-regular);
}
.profile-sub-note {
  margin: 12px 0 0;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-muted);
}
.profile-sub-row .profile-sub-note {
  margin: 0;
  white-space: nowrap;
}
.profile-sub-note--strong {
  color: var(--text-color);
}
.profile-sub-tile.is-empty .profile-sub-link {
  font-size: var(--fs-14);
}
.profile-sub-zone {
  display: flex;
  gap: 4px;
  height: 14px;
  margin-top: 16px;
}
.profile-sub-zone i {
  flex: 1 1 0;
  border-radius: 5px;
  background: var(--sub-track);
}
.profile-sub-tile.is-empty .profile-sub-zone i:nth-child(1) { flex-grow: 5; }
.profile-sub-tile.is-empty .profile-sub-zone i:nth-child(2) { flex-grow: 3; }
.profile-sub-tile.is-empty .profile-sub-zone i:nth-child(3) { flex-grow: 2; }
.profile-sub-tile:not(.is-empty) .profile-sub-zone .is-high,
.profile-sub-legend .is-high { background: var(--accent-color); }
.profile-sub-tile:not(.is-empty) .profile-sub-zone .is-mid,
.profile-sub-legend .is-mid { background: var(--sub-zone-mid); }
.profile-sub-tile:not(.is-empty) .profile-sub-zone .is-low,
.profile-sub-legend .is-low { background: var(--sub-past); }
.profile-sub-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.profile-sub-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-primary);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-color);
}
.profile-sub-legend b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.profile-sub-tile.is-empty :is(.profile-sub-zone, .profile-sub-legend, .profile-sub-chart) {
  opacity: 0.5;
}
.profile-sub-tile.is-empty .profile-sub-legend span { color: var(--text-muted); }
.profile-sub-tile.is-empty .profile-sub-legend b { background: var(--sub-past); }
/* График занимает остаток плитки (высоту ряда задаёт плитка мэтчей) и тянется без сохранения пропорций:
   штрихи и точки не искажаются за счёт non-scaling-stroke, подпись — HTML, чтобы не масштабировалась */
.profile-sub-chart-box {
  position: relative;
  flex: 1 1 0;
  min-height: 40px;
  margin-top: 16px;
}
.profile-sub-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.profile-sub-chart * {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.profile-sub-chart-label {
  position: absolute;
  right: 0;
  bottom: calc((1 - var(--good-share)) * 100% + 4px);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-muted);
}
.profile-sub-chart-good {
  stroke: var(--sub-track);
  stroke-dasharray: 3 4;
}
.profile-sub-chart-line,
.profile-sub-chart-ghost {
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.profile-sub-chart-ghost {
  stroke: var(--sub-past);
}
/* Точка — штрих нулевой длины с круглым концом; полая точка — второй штрих цветом плитки поверх */
.profile-sub-chart-dot {
  stroke: var(--text-muted);
  stroke-width: 9;
  stroke-linecap: round;
}
.profile-sub-tile.is-empty .profile-sub-chart-dot { stroke: var(--sub-past); }
.profile-sub-chart-dot-hole {
  stroke: var(--sub-tile);
  stroke-width: 5;
  stroke-linecap: round;
}
.profile-sub-chart-dot.is-last {
  stroke: var(--accent-color);
  stroke-width: 10;
}
.profile-sub-strip {
  border-radius: 20px;
  background: var(--sub-tile);
}
.profile-sub-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px 0;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-muted);
}
.profile-sub-week-legend::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--sub-now);
}
.profile-sub-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.profile-sub-cell {
  min-width: 0;
  padding: 10px 16px 14px;
}
.profile-sub-cell + .profile-sub-cell {
  box-shadow: inset 1px 0 0 var(--filter-divider);
}
.profile-sub-cell-label {
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.profile-sub-cell-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 0;
  font-size: var(--fs-17);
  line-height: var(--lh-17);
  font-weight: var(--fw-medium);
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}
.profile-sub-cell-value small {
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.profile-sub-cell-now {
  margin-left: -2px;
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.profile-sub-cell .profile-sub-note {
  margin: 8px 0 0;
}
.profile-sub-segments {
  display: flex;
  gap: 3px;
  margin-top: 10px;
}