/* Generated by node scripts/build-profile-css.cjs. Edit public/css/profile/*.css. */
/* =========================================
   1. ЗАГАЛЬНІ СТИЛІ ТА СТАРІ ЕЛЕМЕНТИ
   ========================================= */

.profile-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.profile-block > * {
  margin: 0;
  padding: 0;
  align-self: flex-start; 
}

.profile-left {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.statistic-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: 7px;
  background: linear-gradient(135deg, #a8d8f0, #d0f0ff);
  border: 1px solid #ddd;
  min-height: 120px;
}

@media (max-width: 768px) {
  .profile-block {
    flex-direction: column;
    gap: 1rem;
  }
  .profile-card, .profile-bio {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
  }
  .statistic-card {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  .statistic-card ul {
    margin: 0;
    padding-left: 1rem;
  }
}

.content-profile {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.5rem;
  border-radius: 7px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Старі списки та біо */
.bio-html {
  font-family: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  box-sizing: border-box;
}

.bio-html b, .bio-html strong { font-weight: bold; }
.bio-html i, .bio-html em { font-style: italic; }
.bio-html u { text-decoration: underline; }

ul.portfolio-links {
  list-style-type: none; 
  padding-left: 0; 
}

ul.portfolio-links li {
  position: relative;
  padding-left: 1.2em;
}

ul.portfolio-links li::before {
  content: '•'; 
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); 
  color: #555;
  font-size: 1.2em;
}

.portfolio-links a {
  word-break: break-word;      
  overflow-wrap: anywhere;      
  display: inline-block;        
  max-width: 100%;             
  white-space: normal;          
}

/* =========================================
   2. ШКАЛА РЕЙТИНГУ (Стара версія)
   ========================================= */

.rating-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-left: 0;
  background: var(--background);
  padding: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid #ccc;
}

.rating-bar-bg {
  width: 20px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}

.rating-bar-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #00c853;
  transition: height 0.4s ease;
  cursor: pointer;
}

.rating-label {
  font-size: 0.85em;
  color: #444;
}

@keyframes pulseUpDown {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-10px); }
  60%  { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

.rating-bar-fill.animate {
  animation: pulseUpDown 0.6s ease;
}

/* =========================================
   3. ОСОБИСТИЙ КАБІНЕТ (Дашборд)
   ========================================= */

.profile-card {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 0rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  position: relative;
}

.profile-card .avatar img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
}

.profile-card .info h2 { margin: 0; }

.profile-header-flex {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-bottom: 25px;
}

.dashboard-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  cursor: default;
  border: 3px solid #f7fafc;
}

.dashboard-avatar.pro-border {
  border-color: #f6e05e;
  cursor: pointer;
  transition: transform 0.2s;
}

.dashboard-avatar.pro-border:hover { transform: scale(1.05); }

.user-display-name {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-meta-data {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #718096;
  font-size: 0.9rem;
}

.pro-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.8rem;
  margin-top: 5px;
  width: fit-content;
}

.pro-status-badge.active { background: #fefcbf; color: #b7791f; }
.pro-status-badge.inactive { background: #edf2f7; color: #718096; }

.dashboard-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 25px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px !important;
  text-decoration: none;
  text-align: center;
  gap: 10px;
  transition: all 0.2s;
}

.action-item:hover {
  transform: translateY(-3px);
  border-color: #2c7a7b;
}

.action-item.highlight {
  background: #f0fff4;
  border-color: #c6f6d5;
}

.action-item .icon { font-size: 1.5rem; }
.action-item .text { font-weight: 700; color: #2d3748; }

.club-promo-card { margin-top: 25px; border-left: 4px solid #1a202c; }
.club-header-mini { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.club-header-mini h3 { margin: 0; }
.no-underline { text-decoration: none; color: inherit; }

.referral-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 15px;
}

.ref-count-badge {
  background: #f7fafc;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid #e2e8f0;
}

@media (max-width: 600px) {
  .profile-header-flex { flex-direction: column; text-align: center; }
  .user-display-name { justify-content: center; }
  .referral-link-box { width: 100%; }
}

/* Компактна статистика в дашборді */
.user-stats-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.4rem; 
}

.stats-title {
  font-weight: 700;
  font-size: 0.85rem; 
  color: var(--primary);
  margin-top: 0;  
  margin-bottom: 0.2rem; 
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-row {
  display: flex;
  align-items: center;
  padding: 0.5rem; 
  transition: all 0.2s ease;
  text-decoration: none; 
}

.stat-row:hover { padding-left: 4px; }

/* Ізолюємо stat-label для старого дашборду */
.stat-row .stat-label { color: var(--text-muted); }

.dots {
  flex-grow: 1;
  border-bottom: 1px dotted #ddd;
  margin: 0 8px; 
  height: 10px;  
}

.badge {
  min-width: 22px; 
  height: 20px;    
  background: #f0f0f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem; 
  font-weight: bold;
  color: #555;
}

.badge.gold { background: #FFD700; color: #000; box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3); }
.badge.gray { background: #e9e9e9; color: #999; }
.highlight .stat-label { font-weight: 600; }
.subtle-divider { margin: 0.5rem 0; }

#pro-block { display: none; }
#pro-block.visible { display: block; }

/* =========================================
   4. QUILL EDITOR & ФОРМИ РЕЗЮМЕ
   ========================================= */

.profile-bio {
  background: #ffffff; 
  border: 1px solid rgba(0, 0, 0, 0.06); 
  border-radius: 7px;
  padding: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); 
  font-size: 0.95rem; 
  line-height: 1.7; 
  color: #2c3e50; 
  margin-bottom: 2rem;
  transition: box-shadow 0.3s ease;
}

.profile-bio:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
.profile-bio p { margin-bottom: 0.8rem; }
.profile-bio p:last-child { margin-bottom: 0; }
.profile-bio strong { display: block; margin-bottom: 0.5rem; color: #222; }

.full-textarea {
  width: 100%;
  min-height: 200px;
  resize: vertical;
  padding: 10px;
  font-size: 0.775rem;
  box-sizing: border-box;
  border: 1px solid #d9cbbb;
  border-radius: 7px;
}

.ql-editor p {text-align: left !important; }
.order-description ul, .order-description ol { padding-left: 25px; margin-bottom: 15px; }
.order-description li { margin-bottom: 5px; }
.order-description h1, .order-description h2, .order-description h3 { margin-top: 20px; margin-bottom: 10px; }
.bio-html ul, .bio-html ol { padding-left: 25px; margin-bottom: 15px; }
.bio-html p { margin-bottom: 10px; text-align: left !important; }
.bio-html span[style] { display: inline; }

#editor-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#editor-wrapper .ql-toolbar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap; 
  align-items: center; 
  gap: 8px; 
  padding: 10px;
  background-color: #f8f9fa; 
  border-bottom: 1px solid #ccc;
}

#editor-wrapper .ql-toolbar .ql-formats {
  display: flex;
  margin: 0; 
}

#editor-wrapper .ql-editor {
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word; 
  word-break: break-word; 
  white-space: pre-wrap; 
  overflow-x: hidden;
  font-size: 13px;
}

.ql-editor { font-size: 14px; line-height: 1.5; }

/* =========================================
   5. СУЧАСНИЙ ПУБЛІЧНИЙ ПРОФІЛЬ (INFLUKR)
   ========================================= */

.profile-layout-modern {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-bottom: 30px;
  align-items: start;
}

@media (max-width: 800px) {
  .profile-layout-modern { grid-template-columns: 1fr; }
}

/* Сайдбар */
.profile-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.avatar-container { width: 140px; height: 140px; margin-bottom: 20px; }
.profile-avatar {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; border: 3px solid #f8fafc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: transform 0.2s;
}
.profile-avatar.editable:hover { transform: scale(1.03); cursor: pointer; border-color: #0f766e; }
.avatar-lock-notice { font-size: 0.75rem; color: #64748b; background: #f1f5f9; padding: 4px 10px; border-radius: 12px; margin-bottom: 16px; }

/* Шкала рейтингу */
.rating-container { width: 100%; margin-bottom: 20px; background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; }
.rating-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: #64748b; margin-bottom: 6px; font-weight: 600; }
.rating-value { color: #10b981; font-weight: 800; }
.rating-bar-horizontal { width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.rating-fill { height: 100%; background: #10b981; border-radius: 4px; transition: width 0.5s ease; }

/* Короткий опис */
.short-bio-container { width: 100%; text-align: center; border-top: 1px dashed #cbd5e1; padding-top: 16px; }
.short-bio-text { font-size: 0.95rem; color: #334155; font-style: italic; margin: 0 0 12px 0; line-height: 1.4; }
.short-bio-text.empty { color: #94a3b8; }

.short-bio-desktop { display:block; }
.short-bio-mobile { display:none; }
@media (max-width:768px) {
  .short-bio-desktop { display:none; }
  .short-bio-mobile { display:block; }
  .short-bio-text {
    white-space:normal;      
    word-wrap:break-word;
    text-align: left;
    font-weight: 500;
    margin: 0;
    border-radius: 7px; 
    background: #fff; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); 
    width: 100%;
    min-width: 200px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0.5rem;
  }
}

.btn-outline-small { background: transparent; border: 1px solid #cbd5e1; color: #475569; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; width: 100%; }
.btn-outline-small:hover { background: #f1f5f9; border-color: #94a3b8; }
.edit-bio-form { width: 100%; margin-top: 12px; background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; }
.edit-bio-form input { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; margin-top: 4px; outline: none; }
.char-counter { text-align: right; font-size: 0.75rem; color: #64748b; margin-top: 4px; }
.btn-save-small { width: 100%; background: #0f766e; color: white; border: none; padding: 8px; border-radius: 6px; margin-top: 8px; cursor: pointer; }

/* Статуси в шапці */
.status-online { color: #10b981; font-weight: bold; margin:0; }
.status-recent { color: #f59e0b; font-weight: bold; margin:0; }
.status-offline { color: #94a3b8; margin:0; }

/* =========================================
   6. ПРАВА КОЛОНКА ПРОФІЛЮ (Статистика + Меню)
   ========================================= */

.profile-main {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
  width: 100%;
  min-width: 0;
}

.stats-overview {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
}

.stat-item {
  flex: 1; 
  min-width: 0; 
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 8px; 
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-value {
  font-size: clamp(1.1rem, 4vw, 1.5rem); 
  font-weight: bold;
  color: #0f766e;
  display: block;
  white-space: nowrap; 
}
.stat-value.warning { color: #b45309; }

/* Ізолюємо stat-label для нового профілю */
.stat-item .stat-label {
  font-size: clamp(0.55rem, 2.2vw, 0.75rem); 
  color: #64748b;
  margin-top: 4px;
  display: block;
  white-space: normal; 
  line-height: 1.1; 
  overflow: visible;
  text-overflow: clip;
  word-wrap: break-word;
}

.section-heading {
  margin: 0;
  font-size: 1.1rem;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
}

.profile-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.menu-item:hover {
  border-color: #0f766e;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
  transform: translateY(-1px);
}

.menu-icon { font-size: 1.4rem; }
.menu-text { display: flex; flex-direction: column; }
.menu-text strong { font-size: 0.9rem; color: #0f766e; }
.menu-text span { font-size: 0.75rem; color: #64748b; }

/* =========================================
   7. РЕЗЮМЕ ТА ПОРТФОЛІО (Нижні блоки)
   ========================================= */

.content-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.card-header h2 { margin: 0; font-size: 1.4rem; }

.btn-outline-modern {
  background: transparent;
  border: 1px solid #0f766e;
  color: #0f766e;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline-modern:hover { background: #0f766e; color: white; }

.portfolio-block { margin-top: 30px; padding-top: 20px; border-top: 1px dashed #cbd5e1; }
.portfolio-title { font-size: 1.1rem; color: #1e293b; margin-bottom: 16px; }

.portfolio-links-grid, .portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portfolio-link-btn, .portfolio-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: left !important;
}

.portfolio-link-btn:hover, .portfolio-item:hover {
  background-color: #e2e8f0;
  color: #0f766e;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.pro-lock-state, .empty-state { text-align: center; padding: 40px 20px; color: #64748b; }
.lock-icon, .empty-icon { font-size: 3rem; display: block; margin-bottom: 16px; opacity: 0.5; }

/* ВІДЖЕТ ПОШИРЕННЯ */
.share-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px dashed #94a3b8;
  border-radius: 12px;
  padding: 24px;
  margin-top: 40px;
  flex-wrap: wrap;
  gap: 16px;
}

.share-info { display: flex; align-items: center; gap: 16px; }
.share-icon { font-size: 2rem; }
.share-info h4 { margin: 0 0 4px 0; color: #1e293b; }
.share-info p { margin: 0; font-size: 0.85rem; color: #64748b; }

.share-action {
  display: flex;
  flex-grow: 1;
  max-width: 400px;
  gap: 8px;
}

.share-action input {
  flex-grow: 1;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  background: white;
}

.btn-copy {
  background: #0f766e;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

.btn-copy.success { background: #10b981; }


/* =========================================
   🔥 Стилі для Візуального Портфоліо
   ========================================= */

.portfolio-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.portfolio-img-wrapper {
  position: relative; 
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: white;
}

.portfolio-main-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
  z-index: 1;
}

.portfolio-img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio-img-wrapper:hover .portfolio-main-img {
  transform: scale(1.05);
}

.portfolio-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: 2; 
}

.portfolio-img-wrapper:hover .portfolio-img-overlay {
  opacity: 1;
}

.portfolio-delete-form {
  align-self: flex-end;
  margin: 0;
}

.portfolio-replace-form {
  align-self: center;
  margin: 0;
}

.portfolio-delete-btn {
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 0;
  line-height: 1;
}

.portfolio-delete-btn:hover {
  background: rgb(220, 38, 38);
  transform: scale(1.1);
}

.portfolio-replace-label {
  background: rgba(15, 118, 110, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 0;
}

.portfolio-replace-label:hover {
  background: rgb(17, 94, 89);
  transform: translateY(-1px);
}

.portfolio-hidden-input {
  display: none;
}

/* ==========================================================================
   ВЕРХНЯ ПАНЕЛЬ ПРОФІЛЮ (Статус + Кнопки)
   ========================================================================== */
.profile-top-bar {
  display: flex;
  justify-content: space-between; /* Розсуває елементи по краях */
  align-items: flex-start; /* Вирівнює по верхньому краю */
  width: 100%;
  margin-bottom: 15px; /* Відступ до імені */
  flex-wrap: wrap; /* Дозволяє перенос на новий рядок на дуже вузьких екранах */
  gap: 10px; /* Відстань між статусом і кнопками, якщо вони зустрінуться */
}

/* Прибираємо старі відступи і absolute у статусу, щоб він був компактним */
.profile-top-bar .activity-status-box {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  flex: 1; /* Дозволяє статусу займати весь вільний простір зліва */
}

/* Текст останнього візиту */
.profile-top-bar .last-seen-text {
  margin: 4px 0 0 0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.2;
}

/* ==========================================================================
   КНОПКИ СПИСКІВ (Білий / Чорний)
   ========================================================================== */
.user-lists-toggles {
  display: flex;
  gap: 8px;
  /* Прибрано position: absolute; top; right; */
}

.list-btn {
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  display: flex; /* Вирівнює іконку всередині */
  align-items: center;
  justify-content: center;
}

.list-btn:hover {
  background: #f1f5f9;
}

/* Активні стани */
.list-btn.btn-white.active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #10b981;
}

.list-btn.btn-black.active {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}
btn-manage-lists {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.btn-manage-lists:hover {
  background: #f1f5f9;
}

/* Profile-lists */

.lists-container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.lists-header { text-align: center; margin-bottom: 40px; }
.lists-header h1 { font-size: 1.8rem; color: #1e293b; margin-bottom: 10px; }
.lists-header p { color: #64748b; }

.lists-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 768px) { .lists-grid { grid-template-columns: 1fr; } }

.list-column { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; }
.column-title { display: flex; align-items: center; gap: 10px; padding: 15px 20px; font-weight: 600; font-size: 1.1rem; border-bottom: 1px solid #e2e8f0; }
.column-white .column-title { background: #f0fdf4; color: #065f46; }
.column-black .column-title { background: #fef2f2; color: #991b1b; }

.list-items { padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.empty-list-msg { text-align: center; color: #94a3b8; padding: 20px; font-style: italic; }

.list-item { 
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px; 
    border: 1px solid #f1f5f9; border-radius: 8px; background: #fafafa; transition: 0.2s; overflow: hidden;
}
.list-item:hover { background: #f1f5f9; border-color: #e2e8f0; }

.list-author-wrapper { display: flex; flex-direction: column; gap: 4px; }
.list-date { font-size: 0.75rem; color: #94a3b8; margin-left: 50px; /* Зсув під текст імені, враховуючи ширину аватарки */ }

.remove-btn { 
    background: transparent; border: none; color: #cbd5e1; cursor: pointer; 
    font-size: 1.2rem; padding: 5px 10px; border-radius: 6px; transition: 0.2s;
}
.remove-btn:hover { background: #fee2e2; color: #ef4444; }

/* Трохи адаптуємо паршіал під цей список, щоб він не розтягувався */
.list-item .author-info { margin: 0; padding: 0; background: transparent; box-shadow: none; border: none; }



/* ==========================================================================
   10. ПРОФЕСІЙНИЙ ПРОФІЛ / НАПРЯМИ / UGC / СПОВІЩЕННЯ
   ========================================================================== */

.professional-summary-card {
  margin-bottom: 18px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.professional-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.professional-summary-head h2 {
  margin: 3px 0 0;
  color: #1e293b;
  font-size: 1.15rem;
  line-height: 1.25;
}

.professional-eyebrow,
.professional-direction-label {
  display: block;
  color: var(--primary, #0f766e);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.professional-summary-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #dbe7e5;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
}

.availability-badge.is-available {
  color: #166534;
  background: #f0fdf4;
  border-color: #dcfce7;
}

.availability-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex: 0 0 6px;
}

.professional-edit-link {
  padding: 5px 9px;
  border: 1px solid #dbe7e5;
  border-radius: 7px;
  background: transparent;
  color: var(--primary, #0f766e);
  font-size: 0.7rem;
  font-weight: 650;
  cursor: pointer;
}

.professional-edit-link:hover {
  background: rgba(15, 118, 110, 0.05);
  border-color: rgba(15, 118, 110, 0.35);
}

.professional-direction-group + .professional-direction-group,
.professional-direction-group + .professional-about-block,
.professional-about-block + .professional-about-block,
.professional-about-block + .ugc-profile-video {
  margin-top: 14px;
}

.professional-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.professional-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: rgba(15, 118, 110, 0.05);
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
}

.professional-chip.is-need {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

.professional-subtypes {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 0.68rem;
  line-height: 1.45;
}

.professional-about-block {
  padding-top: 13px;
  border-top: 1px solid #f1f5f9;
}

.professional-about-block strong {
  display: block;
  margin-bottom: 4px;
  color: #334155;
  font-size: 0.78rem;
}

.professional-about-block p {
  margin: 0;
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-line;
}

.professional-empty {
  padding: 13px;
  border: 1px dashed #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
}

.professional-empty strong,
.professional-empty span {
  display: block;
}

.professional-empty strong {
  color: #475569;
  font-size: 0.78rem;
}

.professional-empty span {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 0.68rem;
}

/* PUBLIC UGC VIDEO */

.ugc-profile-video {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
  gap: 16px;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f1f5f9;
}

.ugc-profile-video-copy strong {
  display: block;
  margin-top: 4px;
  color: #1e293b;
  font-size: 0.9rem;
}

.ugc-profile-video-copy p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.45;
}

.ugc-profile-video-player {
  display: block;
  width: 100%;
  max-height: 360px;
  border-radius: 10px;
  background: #0f172a;
}

/* EDITOR WRAPPER */

.professional-editor {
  margin-bottom: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.professional-settings-form {
  display: grid;
  gap: 12px;
}

.professional-edit-section {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.professional-edit-section[hidden],
.professional-field[hidden],
.profile-setting-toggle[hidden],
.ugc-editor-card[hidden] {
  display: none !important;
}

.professional-edit-section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 13px;
}

.professional-edit-section-head h3 {
  margin: 0;
  color: #1e293b;
  font-size: 0.92rem;
  line-height: 1.3;
}

.professional-edit-section-head p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.4;
}

.professional-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 7px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--primary, #0f766e);
  font-size: 0.68rem;
  font-weight: 800;
}

/* ROLE */

.profile-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-mode-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.profile-mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-mode-option > span {
  display: flex;
  flex-direction: column;
  min-height: 66px;
  padding: 11px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.profile-mode-option strong {
  color: #334155;
  font-size: 0.78rem;
}

.profile-mode-option small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 0.62rem;
  line-height: 1.3;
}

.profile-mode-option input:checked + span {
  border-color: rgba(15, 118, 110, 0.45);
  background: rgba(15, 118, 110, 0.05);
}

.profile-mode-option input:checked + span strong {
  color: var(--primary, #0f766e);
}

/* DIRECTIONS */

.direction-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.select-all-directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 0.68rem;
  cursor: pointer;
}

.select-all-directions input {
  accent-color: var(--primary, #0f766e);
}

.profile-directions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.profile-direction-card {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.profile-direction-card.is-selected {
  border-color: rgba(15, 118, 110, 0.35);
  background: rgba(15, 118, 110, 0.025);
}

.profile-direction-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
}

.profile-direction-main input {
  margin-top: 2px;
  accent-color: var(--primary, #0f766e);
}

.profile-direction-main > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-direction-main strong {
  color: #334155;
  font-size: 0.74rem;
  line-height: 1.25;
}

.profile-direction-main small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.58rem;
}

.profile-subtypes-details {
  border-top: 1px solid #f1f5f9;
}

.profile-subtypes-details summary {
  padding: 7px 10px;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  list-style-position: inside;
}

.profile-subtypes-list {
  display: grid;
  gap: 5px;
  max-height: 220px;
  padding: 0 10px 10px;
  overflow-y: auto;
}

.profile-subtypes-list label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #475569;
  font-size: 0.64rem;
  line-height: 1.3;
  cursor: pointer;
}

.profile-subtypes-list input {
  margin-top: 2px;
  accent-color: var(--primary, #0f766e);
}

/* TEXT */

.professional-text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.professional-field {
  min-width: 0;
}

.professional-field label {
  display: block;
  margin-bottom: 6px;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 650;
}

.professional-field textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.45;
  outline: none;
}

.professional-field textarea:focus {
  border-color: var(--primary, #0f766e);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}

.professional-field > small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 0.58rem;
}

/* TOGGLES */

.profile-setting-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  cursor: pointer;
}

.profile-setting-toggle > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-setting-toggle-ui {
  position: relative;
  width: 34px;
  height: 19px;
  flex: 0 0 34px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.2s ease;
}

.profile-setting-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s ease;
}

.profile-setting-toggle > input:checked + .profile-setting-toggle-ui {
  background: var(--primary, #0f766e);
}

.profile-setting-toggle > input:checked + .profile-setting-toggle-ui::after {
  transform: translateX(15px);
}

.profile-setting-toggle > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-setting-toggle strong {
  color: #334155;
  font-size: 0.72rem;
}

.profile-setting-toggle small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.6rem;
  line-height: 1.35;
}

/* NOTIFICATIONS */

.notification-settings-card {
  padding: 11px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
}

.notification-settings-card .profile-setting-toggle {
  margin-top: 0;
}

.notification-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid #f1f5f9;
}

.notification-channel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
}

.notification-channel input {
  margin-top: 2px;
  accent-color: var(--primary, #0f766e);
}

.notification-channel > span {
  display: flex;
  flex-direction: column;
}

.notification-channel strong {
  color: #334155;
  font-size: 0.7rem;
}

.notification-channel small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.58rem;
  line-height: 1.3;
}

.notification-channel.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* SAVE */

.professional-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #dbe7e5;
  border-radius: 9px;
  background: rgba(15, 118, 110, 0.035);
}

.professional-save-bar > div {
  display: flex;
  flex-direction: column;
}

.professional-save-bar strong {
  color: #334155;
  font-size: 0.68rem;
}

.professional-save-bar span {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.58rem;
}

.professional-save-bar .btn-save-modern {
  width: auto;
  margin: 0;
  padding: 9px 15px;
  flex-shrink: 0;
  font-size: 0.74rem;
}

/* UGC EDITOR */

.ugc-editor-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: 18px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 10px;
  background: #ffffff;
}

.ugc-editor-copy h3 {
  margin: 4px 0 6px;
  color: #1e293b;
  font-size: 0.92rem;
}

.ugc-editor-copy p,
.ugc-editor-copy li {
  color: #64748b;
  font-size: 0.68rem;
  line-height: 1.45;
}

.ugc-editor-copy p {
  margin: 0;
}

.ugc-editor-copy ul {
  margin: 9px 0 0;
  padding-left: 18px;
}

.ugc-editor-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ugc-editor-preview {
  width: 100%;
  max-height: 320px;
  border-radius: 9px;
  background: #0f172a;
}

.ugc-video-upload-form {
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.ugc-video-file {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  padding: 9px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}

.ugc-video-file input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.ugc-video-file span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ugc-video-file strong {
  color: #334155;
  font-size: 0.68rem;
}

.ugc-video-file small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.56rem;
}

.ugc-video-upload-form .btn-outline-modern {
  flex-shrink: 0;
}

.ugc-video-delete {
  padding: 0;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 0.62rem;
  cursor: pointer;
  text-decoration: underline;
}

.ugc-video-delete:hover {
  color: #dc2626;
}

/* MOBILE */

@media (max-width: 800px) {
  .professional-summary-card {
    padding: 14px;
  }

  .professional-summary-head {
    align-items: flex-start;
  }

  .professional-summary-badges {
    max-width: 50%;
  }

  .ugc-profile-video,
  .ugc-editor-card {
    grid-template-columns: 1fr;
  }

  .ugc-profile-video-player {
    max-height: 420px;
  }

  .profile-mode-grid {
    grid-template-columns: 1fr;
  }

  .profile-mode-option > span {
    min-height: 0;
  }

  .professional-text-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .professional-summary-card {
    margin-bottom: 12px;
    border-radius: 10px;
  }

  .professional-summary-head h2 {
    font-size: 1rem;
  }

  .availability-badge {
    font-size: 0.58rem;
  }

  .professional-edit-link {
    font-size: 0.62rem;
  }

  .professional-chip {
    min-height: 25px;
    padding: 4px 7px;
    font-size: 0.62rem;
  }

  .professional-subtypes,
  .professional-about-block p {
    font-size: 0.62rem;
  }

  .professional-edit-section {
    padding: 12px;
  }

  .profile-directions-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .professional-edit-section-head h3 {
    font-size: 0.82rem;
  }

  .notification-channel-grid {
    grid-template-columns: 1fr;
  }

  .professional-save-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .professional-save-bar .btn-save-modern {
    width: 100%;
  }

  .ugc-video-upload-form {
    flex-direction: column;
  }

  .ugc-video-upload-form .btn-outline-modern {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .professional-summary-head {
    flex-direction: column;
  }

  .professional-summary-badges {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
  }
}



/* =========================================================
   13. PROFILE STAGE 1 — ОКРЕМІ НАЛАШТУВАННЯ
   Про себе / Виконавець / Замовник / Портфоліо /
   Сповіщення
   ========================================================= */

#about-section,
#performer-section,
#client-section,
#portfolio-section,
#notifications-section {
  scroll-margin-top: 90px;
}


/* PUBLIC ROLE SUMMARY */

.profile-role-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.profile-role-summary-grid
.professional-summary-card {
  margin: 0;
  min-width: 0;
  box-shadow: none;
}

.role-summary-card.is-client {
  border-color: #e2e8f0;
}

.compact-empty {
  margin-top: 8px;
  padding: 11px;
}

.profile-section-muted {
  margin: 7px 0 0;
  color: #94a3b8;
  font-size: 0.68rem;
  line-height: 1.4;
}


/* SECTION CONTAINER */

.profile-settings-section {
  position: relative;
  margin-bottom: 14px;
}

.profile-settings-section > .card-header {
  align-items: center;
  margin-bottom: 14px;
}

.profile-settings-section
.card-header h2 {
  margin: 1px 0 0;
}

.profile-card-kicker {
  display: block;
  color:
    var(--primary, #0f766e);
  font-size: 0.58rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.profile-section-empty {
  padding: 14px;
  border:
    1px dashed #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 0.72rem;
  line-height: 1.45;
}

.profile-about-simple {
  margin: 0;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.65;
}

.profile-inline-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


/* INDEPENDENT EDITORS */

.profile-independent-editor {
  margin-top: 14px;
  padding-top: 14px;
  border-top:
    1px solid #e2e8f0;
}

.profile-independent-editor[hidden],
.role-settings-body[hidden],
.direction-scope-wrap[hidden],
.direction-specific-box[hidden],
.ugc-editor-card[hidden] {
  display: none !important;
}

.profile-form-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin-bottom: 14px;
}

.profile-form-block > label,
.profile-form-title-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-form-block label strong,
.profile-form-title-row strong {
  color: #334155;
  font-size: 0.76rem;
}

.profile-form-block label small,
.profile-form-title-row small {
  color: #94a3b8;
  font-size: 0.62rem;
  line-height: 1.4;
}

.profile-form-block input[type="text"],
.profile-form-block textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 11px;
  border:
    1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.45;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.profile-form-block textarea {
  resize: vertical;
  min-height: 96px;
}

.profile-form-block input[type="text"]:focus,
.profile-form-block textarea:focus {
  border-color:
    var(--primary, #0f766e);
  box-shadow:
    0 0 0 3px
    rgba(15, 118, 110, 0.08);
}

.profile-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
}

.profile-form-actions
.btn-save-modern {
  width: auto;
  margin: 0;
  padding: 9px 14px;
  font-size: 0.72rem;
}

.profile-mini-info {
  padding: 10px 11px;
  border:
    1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.66rem;
  line-height: 1.45;
}


/* ROLE PUBLIC INFO */

.role-public-overview {
  display: grid;
  gap: 10px;
}

.role-public-label {
  display: block;
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.role-public-description {
  margin: 0;
  padding-top: 9px;
  border-top:
    1px solid #f1f5f9;
  color: #64748b;
  font-size: 0.74rem;
  line-height: 1.55;
}


/* ROLE ENABLE */

.role-enable-toggle {
  margin:
    0 0 14px;
  padding: 11px;
  border:
    1px solid #dbe7e5;
  border-radius: 9px;
  background:
    rgba(15, 118, 110, 0.035);
}

.role-settings-body {
  padding-top: 2px;
}


/* DIRECTION HEADER */

.profile-form-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}


/* DIRECTION CARDS — STAGE 1 */

.profile-directions-grid {
  margin-top: 10px;
}

.profile-direction-card {
  padding: 10px;
}

.profile-direction-card.is-selected {
  border-color:
    rgba(15, 118, 110, 0.28);
  background:
    rgba(15, 118, 110, 0.025);
}

.profile-direction-main {
  margin: 0;
}

.profile-direction-main
input[type="checkbox"] {
  accent-color:
    var(--primary, #0f766e);
}


/* ALL / SPECIFIC */

.direction-scope-wrap {
  margin-top: 9px;
  padding-top: 9px;
  border-top:
    1px solid #edf2f7;
}

.direction-scope-switch {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.direction-scope-switch label {
  position: relative;
  cursor: pointer;
}

.direction-scope-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.direction-scope-switch span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 7px;
  box-sizing: border-box;
  border:
    1px solid #e2e8f0;
  border-radius: 7px;
  background: #ffffff;
  color: #64748b;
  text-align: center;
  font-size: 0.59rem;
  font-weight: 650;
  line-height: 1.2;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.direction-scope-switch
input:checked + span {
  border-color:
    rgba(15, 118, 110, 0.28);
  background:
    rgba(15, 118, 110, 0.08);
  color:
    var(--primary, #0f766e);
}

.direction-specific-box {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.direction-subtype-option {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 5px 2px;
  color: #64748b;
  font-size: 0.62rem;
  line-height: 1.35;
  cursor: pointer;
}

.direction-subtype-option
input {
  margin-top: 1px;
  accent-color:
    var(--primary, #0f766e);
}


/* PORTFOLIO EDITOR */

.portfolio-editor-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portfolio-editor-grid
.profile-form-block {
  margin-bottom: 0;
  padding: 12px;
  border:
    1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
}

.portfolio-upload-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.portfolio-upload-form
input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border:
    1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.65rem;
}

.profile-pro-link {
  width: fit-content;
  margin-top: 2px;
}


/* NOTIFICATIONS */

.notification-public-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 0.7rem;
}

.notification-public-state strong {
  color: #334155;
}

.telegram-connect-note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top:
    1px solid #f1f5f9;
  color: #94a3b8;
  font-size: 0.6rem;
  line-height: 1.45;
}


/* SMALL CLEANUP */

.profile-settings-section
.btn-outline-modern {
  text-decoration: none;
}

.profile-settings-section
.full-textarea {
  min-height: 110px;
  border-color: #cbd5e1;
}


/* =========================================================
   PROFILE STAGE 1 — MOBILE
   ========================================================= */

@media (max-width: 800px) {
  .profile-role-summary-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-editor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #about-section,
  #performer-section,
  #client-section,
  #portfolio-section,
  #notifications-section {
    scroll-margin-top: 72px;
  }

  .profile-settings-section {
    padding: 14px;
  }

  .profile-settings-section
  > .card-header {
    gap: 8px;
  }

  .profile-card-kicker {
    font-size: 0.52rem;
  }

  .profile-settings-section
  .card-header h2 {
    font-size: 1rem;
  }

  .profile-independent-editor {
    margin-top: 11px;
    padding-top: 11px;
  }

  .profile-form-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .select-all-directions {
    align-self: flex-start;
  }

  .direction-scope-switch {
    grid-template-columns: 1fr 1fr;
  }

  .direction-scope-switch span {
    font-size: 0.55rem;
  }

  .profile-form-actions {
    justify-content: stretch;
  }

  .profile-form-actions
  .btn-save-modern {
    width: 100%;
  }

  .notification-public-state {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* =========================================================
   PROFILE ROLE HUB — COMPACT TOP SWITCHER
   ========================================================= */

.profile-role-hub {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.profile-role-hub__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.profile-role-hub__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #0f766e;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-role-hub__title {
  margin: 0;
  color: #1e293b;
  font-size: 1rem;
  line-height: 1.25;
}

.profile-role-hub__hint {
  max-width: 320px;
  color: #94a3b8;
  font-size: 0.66rem;
  line-height: 1.35;
  text-align: right;
}

.profile-role-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-role-tab {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.profile-role-tab:hover {
  border-color: #94a3b8;
  background: #ffffff;
}

.profile-role-tab.is-selected {
  border-color: rgba(15, 118, 110, 0.42);
  background: rgba(15, 118, 110, 0.055);
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.04);
}

.profile-role-tab.is-disabled:not(.is-selected) {
  opacity: 0.72;
}

.profile-role-tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #dbe7e5;
  border-radius: 8px;
  background: #ffffff;
  color: #0f766e;
  font-size: 0.84rem;
  font-weight: 800;
}

.profile-role-tab__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.profile-role-tab__copy strong {
  overflow: hidden;
  color: #1e293b;
  font-size: 0.78rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-role-tab__copy small {
  overflow: hidden;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.6rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-role-tab__state {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.profile-role-tab__state.is-on {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.profile-role-tab__state.is-off {
  background: #cbd5e1;
}

.profile-role-panel {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #edf2f7;
  border-radius: 9px;
  background: #ffffff;
}

.profile-role-panel[hidden] {
  display: none !important;
}

.profile-role-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.profile-role-panel__label,
.profile-role-panel__section-title {
  display: block;
  margin-bottom: 3px;
  color: #0f766e;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-role-panel__head h3 {
  margin: 0;
  color: #1e293b;
  font-size: 0.94rem;
  line-height: 1.25;
}

.profile-role-panel__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  flex-shrink: 0;
}

.profile-role-panel__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #d7e4e2;
  border-radius: 7px;
  background: #ffffff;
  color: #0f766e;
  font-size: 0.64rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.profile-role-panel__edit:hover {
  border-color: #0f766e;
  background: #f0fdfa;
}

.profile-role-panel__section {
  margin-top: 12px;
}

.profile-role-panel__text {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #f1f5f9;
}

.profile-role-panel__text strong {
  display: block;
  margin-bottom: 4px;
  color: #334155;
  font-size: 0.68rem;
}

.profile-role-panel__text p {
  margin: 0;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.profile-role-panel__empty {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.profile-role-panel__empty strong {
  color: #334155;
  font-size: 0.74rem;
}

.profile-role-panel__empty span {
  color: #94a3b8;
  font-size: 0.66rem;
  line-height: 1.4;
}

.profile-role-panel__empty a {
  width: fit-content;
  margin-top: 3px;
  color: #0f766e;
  font-size: 0.65rem;
  font-weight: 700;
  text-decoration: none;
}

.profile-role-panel__video {
  margin-top: 12px;
}

/* Стара сітка з двох карток більше не використовується */
.profile-role-summary-grid {
  display: none !important;
}

@media (max-width: 800px) {
  .profile-role-hub {
    margin-bottom: 14px;
  }

  .profile-role-hub__top {
    align-items: flex-start;
  }

  .profile-role-hub__hint {
    max-width: 220px;
  }
}

@media (max-width: 600px) {
  .profile-role-hub {
    padding: 12px;
    border-radius: 10px;
  }

  .profile-role-hub__top {
    display: block;
    margin-bottom: 10px;
  }

  .profile-role-hub__hint {
    display: block;
    max-width: none;
    margin-top: 4px;
    text-align: left;
    font-size: 0.58rem;
  }

  .profile-role-tabs {
    gap: 6px;
  }

  .profile-role-tab {
    grid-template-columns: 26px minmax(0, 1fr) 7px;
    gap: 7px;
    padding: 8px;
  }

  .profile-role-tab__icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 0.72rem;
  }

  .profile-role-tab__copy strong {
    font-size: 0.68rem;
  }

  .profile-role-tab__copy small {
    font-size: 0.53rem;
  }

  .profile-role-tab__state {
    width: 7px;
    height: 7px;
  }

  .profile-role-panel {
    padding: 11px;
  }

  .profile-role-panel__head {
    gap: 8px;
  }

  .profile-role-panel__head h3 {
    font-size: 0.82rem;
  }

  .profile-role-panel__actions {
    gap: 5px;
  }

  .profile-role-panel__edit {
    min-height: 27px;
    padding: 4px 8px;
    font-size: 0.57rem;
  }
}

@media (max-width: 380px) {
  .profile-role-tab {
    grid-template-columns: minmax(0, 1fr) 7px;
  }

  .profile-role-tab__icon {
    display: none;
  }
}



/* =========================================================
   PROFILE 2026 — CLEAN CREATOR LAYOUT
   ========================================================= */

.profile-header-section {
  margin-bottom: 18px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e8eceb;
  border-radius: 7px;
}

.user-title-row h1 {
  margin: 0;
  color: #161a1d;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.profile-top-bar {
  margin-top: 12px;
}

.profile-role-hub--solid {
  margin: 0 0 22px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #e8eceb;
  border-radius: 7px;
  box-shadow: none;
}

.profile-role-hub__top {
  align-items: center;
  margin-bottom: 14px;
}

.profile-role-hub__eyebrow,
.profile-card-kicker,
.professional-eyebrow {
  color: var(--primary, #0f766e);
}

.profile-role-hub__subline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 7px 0 0;
  color: #707775;
  font-size: .82rem;
}

.profile-role-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #f4f6f5;
  border: 1px solid #e5e9e7;
  border-radius: 7px;
}

.profile-role-switch form {
  margin: 0;
}

.profile-role-switch__btn {
  min-height: 36px;
  padding: 7px 13px;
  color: #5e6562;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
}

.profile-role-switch__btn:hover {
  background: var(--primary-light, #eef7f5);
  color: var(--primary, #0f766e);
}

.profile-role-switch__btn.is-active {
  background: #fff;
  color: #111715;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.profile-role-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid #e5e9e7;
  border-radius: 7px;
  background: #f7f8f8;
}

.profile-role-current.is-ready {
  background: var(--primary-light, #eef7f5);
  border-color: color-mix(in srgb, var(--primary, #0f766e) 30%, #e5e9e7);
}

.profile-role-current.is-paused {
  color: #737a77;
  background: #f3f4f4;
  border-color: #e5e7e6;
}

.profile-role-current.is-client {
  background: #fafbfb;
}

.profile-role-current__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-role-current__copy strong {
  color: #161a1d;
  font-size: .95rem;
}

.profile-role-current__copy span {
  color: #727a77;
  font-size: .76rem;
}

.profile-role-current.is-paused .profile-role-current__copy strong {
  color: #737a77;
}

.profile-job-offer-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 7px;
}

.profile-layout-modern {
  gap: 28px;
}

.profile-sidebar,
.profile-main,
.content-card,
.profile-settings-section {
  box-shadow: none;
}

.profile-sidebar {
  padding: 20px;
  border: 1px solid #e8eceb;
  border-radius: 7px;
  background: #fff;
}

.profile-main {
  min-width: 0;
}

.content-card,
.profile-settings-section {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #e8eceb;
  border-radius: 7px;
  background: #fff;
}

.profile-settings-section > .card-header {
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eff1f0;
}

.profile-settings-section .card-header h2 {
  color: #171b19;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}

.profile-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.profile-menu-grid .menu-item {
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid #e8eceb;
  border-radius: 7px;
  background: #fff;
  color: #171b19;
  box-shadow: none;
}

.profile-menu-grid .menu-item:hover {
  background: var(--primary-light, #eef7f5);
  border-color: color-mix(in srgb, var(--primary, #0f766e) 30%, #e8eceb);
  transform: none;
}

.profile-menu-grid .menu-text {
  margin: 0;
}

.profile-menu-grid .menu-text strong {
  color: #171b19;
  font-size: .84rem;
}

.profile-menu-grid .menu-text span {
  color: #858c89;
  font-size: .69rem;
}

.btn-outline-modern,
.btn-save-modern,
.profile-media-delete,
.btn-outline-small {
  border-radius: 7px;
}

.btn-outline-modern {
  color: #202522;
  border-color: #d9dfdc;
  background: #fff;
}

.btn-outline-modern:hover {
  color: var(--primary, #0f766e);
  background: var(--primary-light, #eef7f5);
  border-color: var(--primary, #0f766e);
}

.profile-independent-editor {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid #eef1ef;
}

.profile-contact-fields {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eef1ef;
}

.profile-form-field {
  display: grid;
  gap: 7px;
}

.profile-form-field > span {
  color: #303633;
  font-size: .78rem;
  font-weight: 700;
}

.profile-form-field input[type="text"],
.profile-form-field input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #d9dfdc;
  border-radius: 7px;
  background: #fff;
  color: #1e2421;
}

.profile-language-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-language-option {
  position: relative;
}

.profile-language-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-language-option span {
  display: block;
  padding: 7px 10px;
  border: 1px solid #dce1df;
  border-radius: 7px;
  background: #fff;
  color: #5d6461;
  font-size: .72rem;
  cursor: pointer;
}

.profile-language-option input:checked + span {
  color: var(--primary, #0f766e);
  background: var(--primary-light, #eef7f5);
  border-color: var(--primary, #0f766e);
}

.profile-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-video-card {
  overflow: hidden;
  border: 1px solid #e5e9e7;
  border-radius: 7px;
  background: #fafbfb;
}

.profile-video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 460px;
  object-fit: cover;
  background: #111;
}

.profile-video-card form {
  margin: 0;
  padding: 8px;
}

.profile-media-delete {
  width: 100%;
  min-height: 34px;
  color: #4f5653;
  background: #fff;
  border: 1px solid #dfe4e2;
  font-size: .72rem;
  cursor: pointer;
}

.profile-media-delete:hover {
  color: #a23939;
  border-color: #d9aaaa;
  background: #fff7f7;
}

.profile-video-upload-form {
  display: grid;
  gap: 12px;
}

.notification-public-state {
  border-radius: 7px;
}

@media (max-width: 800px) {
  .profile-layout-modern {
    gap: 14px;
  }

  .profile-role-hub__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-role-switch {
    width: 100%;
  }

  .profile-role-switch form,
  .profile-role-switch__btn {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .profile-header-section,
  .profile-role-hub--solid,
  .profile-sidebar,
  .content-card,
  .profile-settings-section {
    padding: 14px;
  }

  .profile-role-current {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-role-current .btn-outline-modern,
  .profile-job-offer-btn {
    width: 100%;
    text-align: center;
  }

  .profile-menu-grid,
  .profile-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .profile-menu-grid .menu-item {
    min-height: 58px;
    padding: 10px;
  }

  .profile-menu-grid .menu-text strong {
    font-size: .75rem;
  }

  .profile-menu-grid .menu-text span {
    font-size: .61rem;
  }

  .profile-video-card video {
    max-height: 320px;
  }
}

/* =========================================================
   PROFILE CONTROL CENTER – 2026 REDESIGN
   ========================================================= */

.profile-control-center {
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid #e3e8e6;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.profile-control-center__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.profile-control-center__intro {
  min-width: 0;
}

.profile-control-center__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--primary, #0f766e);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-control-center__intro h2 {
  margin: 0;
  color: #171b19;
  font-size: 1.18rem;
  line-height: 1.25;
}

.profile-control-center__intro p {
  max-width: 620px;
  margin: 6px 0 0;
  color: #737b77;
  font-size: .77rem;
  line-height: 1.5;
}

.profile-activity-form {
  flex: 0 0 auto;
  margin: 0;
}

.profile-activity-toggle {
  min-width: 154px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #dfe5e2;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}

.profile-activity-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-activity-toggle__switch {
  width: 34px;
  height: 19px;
  flex: 0 0 34px;
  position: relative;
  border: 1px solid #cfd7d3;
  border-radius: 999px;
  background: #eef1ef;
  transition: .18s ease;
}

.profile-activity-toggle__switch > span {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .18);
  transition: .18s ease;
}

.profile-activity-toggle.is-on .profile-activity-toggle__switch {
  border-color: var(--primary, #0f766e);
  background: var(--primary, #0f766e);
}

.profile-activity-toggle.is-on .profile-activity-toggle__switch > span {
  transform: translateX(15px);
}

.profile-activity-toggle__copy {
  display: grid;
  gap: 1px;
}

.profile-activity-toggle__copy strong {
  color: #222724;
  font-size: .76rem;
}

.profile-activity-toggle__copy small {
  color: #7b837f;
  font-size: .61rem;
}

.profile-owner-role-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.profile-owner-role-row form {
  margin: 0;
}

.profile-role-choice {
  width: 100%;
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid #e0e5e3;
  border-radius: 7px;
  background: #fafbfb;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.profile-role-choice:hover {
  border-color: #cbd5d1;
  background: #fff;
}

.profile-role-choice.is-selected {
  border-color: var(--primary, #0f766e);
  background: var(--primary-light, #eef7f5);
}

.profile-role-choice__title {
  color: #171b19;
  font-size: .9rem;
  font-weight: 700;
}

.profile-role-choice__meta {
  color: #7b837f;
  font-size: .67rem;
}

.profile-role-choice.is-performer-inactive {
  border-color: #e5e8e7;
  background: #f5f6f6;
}

.profile-role-choice.is-performer-inactive .profile-role-choice__title,
.profile-role-choice.is-performer-inactive .profile-role-choice__meta {
  color: #929996;
}

.profile-role-choice.is-performer-inactive.is-selected {
  border-color: #cfd4d2;
  background: #f0f2f1;
}

.profile-quick-meta {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #e8ecea;
  border-radius: 7px;
  background: #fbfcfc;
}

.profile-quick-meta__field {
  display: grid;
  gap: 5px;
  margin: 0;
}

.profile-quick-meta__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #59615d;
  font-size: .65rem;
  font-weight: 700;
}

.profile-quick-meta select,
.profile-language-picker > summary {
  min-height: 38px;
  border: 1px solid #dfe5e2;
  border-radius: 7px;
  background: #fff;
  color: #222724;
  font: inherit;
}

.profile-quick-meta select {
  width: 100%;
  padding: 0 10px;
  font-size: .76rem;
}

.profile-language-picker {
  position: relative;
}

.profile-language-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  list-style: none;
  cursor: pointer;
}

.profile-language-picker > summary::-webkit-details-marker {
  display: none;
}

.profile-language-picker__value {
  color: #808783;
  font-size: .66rem;
  white-space: nowrap;
}

.profile-language-picker__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 2px;
  padding: 7px;
  border: 1px solid #dfe5e2;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(31, 41, 37, .08);
}

.profile-language-picker__menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 7px;
  border-radius: 5px;
  color: #333a36;
  font-size: .72rem;
  cursor: pointer;
}

.profile-language-picker__menu label:hover {
  background: #f5f7f6;
}

.profile-quick-meta__save {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--primary, #0f766e);
  border-radius: 7px;
  background: var(--primary, #0f766e);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-owner-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.profile-owner-action {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #e1e6e4;
  border-radius: 7px;
  background: #fff;
  color: #252b28;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.profile-owner-action:hover,
.profile-owner-action.is-active {
  border-color: color-mix(in srgb, var(--primary, #0f766e) 45%, #dfe5e2);
  background: var(--primary-light, #eef7f5);
}

.profile-owner-action:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.profile-owner-action > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-owner-action strong {
  overflow: hidden;
  color: #242a27;
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-owner-action small {
  overflow: hidden;
  color: #858c88;
  font-size: .61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-svg-slot {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  position: relative;
  color: var(--primary, #0f766e);
  font-size: .8rem;
}

.profile-svg-slot img {
  width: 18px;
  height: 18px;
  position: absolute;
  inset: 3px;
  object-fit: contain;
}

.profile-svg-slot img:not([style*="display: none"]) + span {
  opacity: 0;
}

.profile-owner-workspace {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ebefed;
}

.profile-owner-workspace[hidden] {
  display: none !important;
}

.profile-owner-workspace > .content-card,
.profile-owner-workspace > .profile-settings-section {
  margin: 0;
  padding: 16px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.profile-owner-workspace .profile-settings-section > .card-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.profile-owner-workspace .card-header > .btn-outline-modern[data-toggle-panel] {
  display: none;
}

.profile-owner-workspace .profile-independent-editor {
  margin-top: 12px;
}

.profile-inactive-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #e0e4e2;
  border-radius: 7px;
  background: #f5f6f6;
  color: #777e7a;
  font-size: .7rem;
  line-height: 1.5;
}

.profile-public-activity {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #e1e5e3;
  border-radius: 7px;
  color: #6f7773;
  background: #fafbfb;
  font-size: .64rem;
  font-weight: 700;
}

.profile-public-activity.is-on {
  border-color: color-mix(in srgb, var(--primary, #0f766e) 28%, #e1e5e3);
  color: var(--primary, #0f766e);
  background: var(--primary-light, #eef7f5);
}

.profile-role-hub--inactive,
.profile-role-hub--inactive .profile-role-current {
  background: #f5f6f6;
  border-color: #e2e5e4;
}

.profile-role-hub--inactive .profile-role-hub__title,
.profile-role-hub--inactive .profile-role-current__copy strong,
.profile-role-hub--inactive .profile-role-current__copy span {
  color: #8b918e;
}

.profile-workspace-source-wrap[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  .profile-control-center__head {
    flex-direction: column;
  }

  .profile-activity-form,
  .profile-activity-toggle {
    width: 100%;
  }

  .profile-quick-meta {
    grid-template-columns: 1fr 1fr;
  }

  .profile-quick-meta__save {
    grid-column: 1 / -1;
  }

  .profile-owner-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .profile-control-center {
    padding: 13px;
  }

  .profile-owner-role-row,
  .profile-quick-meta,
  .profile-owner-actions {
    grid-template-columns: 1fr;
  }

  .profile-quick-meta__save {
    grid-column: auto;
  }

  .profile-owner-action {
    min-height: 52px;
  }

  .profile-language-picker__menu {
    position: static;
    margin-top: 5px;
    box-shadow: none;
  }
}

/* =========================================================
   PROFILE CONTROL CENTER V3 – COMPACT OWNER / AIRY PUBLIC
   ========================================================= */

.profile-control-center {
  margin: 18px 0 28px;
  padding: 16px 18px;
}

.profile-owner-modebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-owner-role-row--compact {
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.profile-owner-role-row--compact form {
  flex: 0 0 auto;
}

.profile-role-choice--compact {
  width: auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.profile-control-center.is-muted .profile-role-choice--compact {
  border-color: #e1e5e3;
  background: #f2f4f3;
  color: #9aa09d;
}

.profile-control-center.is-muted .profile-role-choice--compact.is-selected {
  border-color: #cfd4d2;
  background: #ecefee;
  color: #7d8480;
}

.profile-activity-toggle--compact {
  min-width: 0;
  min-height: 34px;
  gap: 7px;
  padding: 5px 8px;
}

.profile-activity-toggle--compact .profile-activity-toggle__switch {
  width: 30px;
  height: 17px;
  flex-basis: 30px;
}

.profile-activity-toggle--compact .profile-activity-toggle__switch > span {
  width: 11px;
  height: 11px;
}

.profile-activity-toggle--compact.is-on .profile-activity-toggle__switch > span {
  transform: translateX(13px);
}

.profile-activity-toggle--compact .profile-activity-toggle__copy strong {
  font-size: .66rem;
  white-space: nowrap;
}

.profile-owner-actions--icons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf0ef;
}

.profile-owner-action--icon {
  min-width: 0;
  min-height: 42px;
  justify-content: center;
  padding: 7px;
  text-align: center;
}

.profile-owner-action--icon .profile-svg-slot {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.profile-owner-action--icon .profile-svg-slot img {
  width: 20px;
  height: 20px;
}

.profile-owner-action--icon > span:not(.profile-svg-slot) {
  display: none !important;
}

.profile-meta-editor {
  display: grid;
  gap: 18px;
}

.profile-meta-editor select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #dfe5e2;
  border-radius: 7px;
  background: #fff;
  color: #272d2a;
}

.profile-language-grid--airy {
  gap: 8px;
}

.profile-owner-workspace {
  margin-top: 16px;
  padding-top: 18px;
}

.profile-owner-workspace .role-settings-body,
.profile-owner-workspace .profile-independent-editor {
  display: block;
}


/* Public profile */
.profile-public-shell {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.profile-public-card {
  position: relative;
  margin: 18px 0 30px;
  padding: 28px 32px;
  border: 1px solid #edf0ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(24, 37, 31, .035);
}

.profile-public-card__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: start;
  gap: 22px;
  position: relative;
}

.profile-public-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-public-avatar {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f5f4;
}

.profile-public-namebox {
  min-width: 0;
}

.profile-public-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-public-name-row h1 {
  margin: 0;
  color: #151917;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.15;
}

.profile-public-roleline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.profile-public-rolebadge,
.profile-public-dnd {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: .66rem;
  font-weight: 700;
}

.profile-public-rolebadge {
  color: var(--primary, #0f766e);
  background: var(--primary-light, #eef7f5);
}

.profile-public-dnd {
  color: #777e7a;
  background: #f1f3f2;
}

.profile-public-role-art {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fafbfb;
}

.profile-public-role-art img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.profile-public-list-actions {
  position: absolute;
  top: -8px;
  right: 102px;
  display: flex;
  gap: 5px;
}

.profile-public-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f0f2f1;
}

.profile-public-stars {
  display: inline-flex;
  gap: 2px;
  line-height: 1;
}

.profile-public-star {
  color: #d8ddda;
  font-size: 1rem;
}

.profile-public-star.is-active {
  color: #f2b423;
}

.profile-public-rating-text {
  color: #69716d;
  font-size: .78rem;
}

.profile-public-rating-text strong {
  color: #262c29;
}

.profile-public-directions {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.profile-public-info-label {
  color: #808783;
  font-size: .68rem;
  font-weight: 700;
}

.profile-public-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-public-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #e5e9e7;
  border-radius: 7px;
  background: #fafbfb;
  color: #343a37;
  font-size: .7rem;
}

.profile-public-info-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.profile-public-info-row {
  display: grid;
  grid-template-columns: 34px 90px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.profile-public-info-row strong {
  color: #343a37;
  font-size: .79rem;
  font-weight: 500;
  text-align: right;
}

.profile-public-info-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 9px;
  background: var(--primary-light, #eef7f5);
  color: var(--primary, #0f766e);
}

.profile-public-info-icon img {
  width: 18px;
  height: 18px;
  position: absolute;
  object-fit: contain;
}

.profile-public-info-icon img:not([style*="display: none"]) + span {
  opacity: 0;
}

.profile-public-offer-btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 11px 18px;
  border-radius: 7px;
  background: var(--primary, #0f766e);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}

.profile-public-offer-btn:hover {
  filter: brightness(.96);
  color: #fff;
}

.profile-public-unavailable {
  margin-top: 22px;
  padding: 10px 12px;
  border: 1px solid #e5e8e7;
  border-radius: 7px;
  background: #f5f6f6;
  color: #7a817d;
  font-size: .72rem;
  text-align: center;
}

.profile-public-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.profile-public-nav__item {
  min-width: 0;
  min-height: 42px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid #e7ebe9;
  border-radius: 7px;
  background: #fff;
  color: var(--primary, #0f766e);
  text-decoration: none;
}

.profile-public-nav__item:hover {
  border-color: color-mix(in srgb, var(--primary, #0f766e) 35%, #e7ebe9);
  background: var(--primary-light, #eef7f5);
}

.profile-public-nav__item img {
  width: 20px;
  height: 20px;
  position: absolute;
  object-fit: contain;
}

.profile-public-nav__item img:not([style*="display: none"]) + span {
  opacity: 0;
}

.profile-public-shell > .gradient-line {
  display: none;
}

.profile-public-shell > .content-card,
.profile-public-shell > .profile-settings-section,
.profile-public-shell > section.content-card {
  margin: 0 0 26px;
  padding: 28px 32px;
  border: 1px solid #eef1f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(24, 37, 31, .025);
}

.profile-public-shell .profile-settings-section > .card-header {
  margin-bottom: 22px;
  padding-bottom: 0;
  border-bottom: 0;
}

.profile-public-shell .profile-settings-section .card-header h2,
.profile-public-shell .content-card .card-header h2 {
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}

.profile-public-shell .profile-card-kicker {
  margin-bottom: 6px;
}

.profile-public-shell .profile-about-simple,
.profile-public-shell .bio-html,
.profile-public-shell .bio-html p,
.profile-public-shell .role-public-description {
  color: #4a524e;
  font-size: .95rem;
  line-height: 1.8;
}

.profile-public-shell .profile-video-grid {
  gap: 22px;
}

.profile-public-shell .profile-video-card {
  border: 0;
  background: #fafbfb;
  box-shadow: 0 10px 30px rgba(28, 38, 33, .05);
}

.profile-public-shell .profile-video-card video {
  max-height: 560px;
}

.profile-public-shell .portfolio-gallery {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 20px;
}

.profile-public-shell .portfolio-img-wrapper {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(30, 40, 35, .05);
}

.profile-public-shell .portfolio-main-img {
  height: 240px;
}

.profile-public-shell .share-widget {
  margin: 0 0 30px;
}

@media (max-width: 720px) {
  .profile-control-center {
    padding: 13px;
  }

  .profile-owner-modebar {
    gap: 8px;
  }

  .profile-role-choice--compact {
    min-height: 32px;
    padding: 5px 8px;
    font-size: .66rem;
  }

  .profile-activity-toggle--compact {
    min-height: 32px;
    padding: 4px 7px;
  }

  .profile-activity-toggle--compact .profile-activity-toggle__copy strong {
    font-size: .61rem;
  }

  .profile-owner-actions--icons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .profile-owner-action--icon {
    min-height: 40px;
    padding: 6px 4px;
  }

  .profile-public-card {
    margin-top: 10px;
    padding: 24px 20px;
    border-radius: 16px;
  }

  .profile-public-card__hero {
    grid-template-columns: minmax(0, 1fr) 62px;
    gap: 12px;
  }

  .profile-public-avatar {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
  }

  .profile-public-identity {
    gap: 13px;
  }

  .profile-public-role-art {
    width: 62px;
    height: 62px;
  }

  .profile-public-role-art img {
    width: 50px;
    height: 50px;
  }

  .profile-public-list-actions {
    top: 68px;
    right: 0;
  }

  .profile-public-info-row {
    grid-template-columns: 34px 72px minmax(0, 1fr);
  }

  .profile-public-info-row strong {
    font-size: .74rem;
  }

  .profile-public-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  .profile-public-nav__item {
    min-height: 40px;
  }

  .profile-public-shell > .content-card,
  .profile-public-shell > .profile-settings-section,
  .profile-public-shell > section.content-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .profile-public-shell .profile-video-grid {
    grid-template-columns: 1fr;
  }

  .profile-public-shell .portfolio-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .profile-public-shell .portfolio-main-img {
    height: 190px;
  }
}

@media (max-width: 430px) {
  .profile-owner-modebar {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-owner-role-row--compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-owner-role-row--compact form,
  .profile-role-choice--compact,
  .profile-activity-form,
  .profile-activity-toggle--compact {
    width: 100%;
  }

  .profile-activity-toggle--compact {
    justify-content: center;
  }

  .profile-owner-actions--icons {
    gap: 5px;
  }

  .profile-owner-action--icon {
    min-height: 38px;
  }

  .profile-owner-action--icon .profile-svg-slot {
    width: 22px;
    height: 22px;
  }

  .profile-owner-action--icon .profile-svg-slot img {
    width: 18px;
    height: 18px;
  }

  .profile-public-card {
    padding: 22px 18px;
  }

  .profile-public-card__hero {
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  .profile-public-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .profile-public-role-art {
    width: 54px;
    height: 54px;
  }

  .profile-public-role-art img {
    width: 44px;
    height: 44px;
  }

  .profile-public-name-row h1 {
    font-size: 1.35rem;
  }

  .profile-public-info-row {
    grid-template-columns: 32px 66px minmax(0, 1fr);
    gap: 8px;
  }

  .profile-public-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
  }

  .profile-public-nav__item {
    min-height: 38px;
  }

  .profile-public-shell .portfolio-gallery {
    grid-template-columns: 1fr;
  }

  .profile-public-shell .portfolio-main-img {
    height: 260px;
  }
}
.profile-public-role-art__fallback {
  color: #9aa19d;
  font-size: 1.35rem;
  font-weight: 800;
}
.profile-public-role-art img:not([style*="display: none"]) + .profile-public-role-art__fallback {
  opacity: 0;
}



/* =========================================================
   PROFILE FINAL TOUCHES – shared owner/public surface
   ========================================================= */

.profile-public-card.is-muted .profile-role-choice--compact {
  border-color: #e1e5e3;
  background: #f2f4f3;
  color: #939a96;
}

.profile-public-avatar.is-editable {
  cursor: pointer;
}

.profile-public-avatar.is-editable:hover {
  opacity: .92;
}

.profile-owner-modebar--inside-card {
  margin: 18px 0 4px;
  padding-top: 14px;
  border-top: 1px solid #eef1f0;
}

.profile-public-success {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #eef1f0;
  border-radius: 7px;
  background: #fafbfb;
}

.profile-public-success__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: .72rem;
  color: #6c746f;
}

.profile-public-success__head strong {
  color: #27312c;
  font-size: .76rem;
}

.profile-public-success__bar {
  margin: 0;
  height: 5px;
}

.profile-public-workstats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 9px;
  color: #737b77;
  font-size: .68rem;
}

.profile-public-workstats span {
  white-space: nowrap;
}

.profile-public-workstats strong {
  color: #343d38;
  font-size: .72rem;
}

/* All quick actions stay in one compact row. Small screens scroll horizontally. */
.profile-public-nav {
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.profile-public-nav::-webkit-scrollbar {
  display: none;
}

.profile-public-nav__item {
  flex: 1 0 42px;
  max-width: 62px;
  min-width: 42px;
  border: 1px solid #edf0ef;
  background: #fff;
}

button.profile-public-nav__item {
  font: inherit;
  cursor: pointer;
}

.profile-public-nav__item.is-active {
  border-color: color-mix(in srgb, var(--primary, #188764) 34%, #e6ebe8);
  background: color-mix(in srgb, var(--primary, #188764) 6%, #fff);
}

.profile-owner-workspace {
  margin-top: 12px;
}

.profile-owner-workspace > .profile-independent-editor,
.profile-owner-workspace > .content-card,
.profile-owner-workspace > .profile-settings-section {
  width: 100%;
  margin: 0;
  padding: 18px;
  border: 1px solid #edf0ef;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.profile-owner-workspace > .profile-independent-editor[hidden] {
  display: none !important;
}

.profile-owner-edit-source[hidden] {
  display: none !important;
}

.profile-share-inline {
  margin-top: 12px;
}

.profile-share-inline[hidden] {
  display: none !important;
}

.profile-share-widget--inline.share-widget {
  margin: 0;
  padding: 14px;
  border: 1px solid #edf0ef;
  border-radius: 7px;
  background: #fafbfb;
  box-shadow: none;
}

.profile-share-widget--inline .share-info h4 {
  margin: 0 0 3px;
  font-size: .82rem;
}

.profile-share-widget--inline .share-info p {
  margin: 0;
  font-size: .7rem;
}

.profile-share-widget--inline .share-action {
  gap: 7px;
}

.profile-share-widget--inline .share-action input {
  min-width: 0;
}

.profile-video-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 10px 10px;
}

.profile-video-actions form {
  margin: 0;
}

.profile-media-admin,
.profile-media-delete--admin {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid #e2e7e4;
  background: #fff;
  color: #4d5752;
  font-size: .68rem;
  font-weight: 650;
  cursor: pointer;
}

.profile-media-admin:hover {
  border-color: color-mix(in srgb, var(--primary, #188764) 36%, #dfe5e2);
  color: var(--primary, #188764);
}

.profile-links-locked {
  align-self: start;
}

@media (max-width: 720px) {
  .profile-owner-modebar--inside-card {
    align-items: center;
    flex-direction: row;
  }

  .profile-public-nav {
    grid-template-columns: none;
  }

  .profile-public-success {
    padding: 11px 12px;
  }

  .profile-public-workstats {
    gap: 5px 10px;
  }

  .profile-share-widget--inline.share-widget {
    display: block;
  }

  .profile-share-widget--inline .share-action {
    margin-top: 10px;
  }
}

@media (max-width: 430px) {
  .profile-owner-modebar--inside-card {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-public-workstats {
    font-size: .64rem;
  }
}


/* =========================================================
   PROFILE UI HOTFIX – avatar input / role contrast / fallback
   ========================================================= */

/* Hidden file controls must never participate in the profile hero layout. */
.profile-avatar-upload-form,
.profile-avatar-upload-form[hidden],
.profile-avatar-upload-form input[type="file"],
.profile-avatar-upload-form input[type="file"][hidden] {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Restore the original quiet but readable role buttons. */
.profile-role-choice.profile-role-choice--compact {
  border: 1px solid #d8dfdc !important;
  background: #fff !important;
  color: #34413b !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.profile-role-choice.profile-role-choice--compact:hover {
  border-color: #bfcac5 !important;
  background: #fafcfb !important;
  color: #26322c !important;
}

.profile-role-choice.profile-role-choice--compact.is-selected {
  border-color: var(--primary, #0f766e) !important;
  background: var(--primary-light, #eef7f5) !important;
  color: var(--primary, #0f766e) !important;
  opacity: 1 !important;
}

/* When activity is off both role buttons may look muted, but text stays legible. */
.profile-public-card.is-muted .profile-role-choice.profile-role-choice--compact {
  border-color: #dde2df !important;
  background: #f3f5f4 !important;
  color: #7c8580 !important;
  opacity: 1 !important;
}

.profile-public-card.is-muted .profile-role-choice.profile-role-choice--compact.is-selected {
  border-color: #cbd2cf !important;
  background: #ecefed !important;
  color: #68716c !important;
}

/* SVG fallback instead of the letters З / В. */
.profile-public-role-art__fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #1f2723;
  opacity: 1;
}

.profile-public-role-art__fallback svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-public-role-art img:not([style*="display: none"]) + .profile-public-role-art__fallback {
  opacity: 0;
  pointer-events: none;
}

/* Profile identity: badges remain in the flow, including long unbroken names. */
.profile-public-card.is-pro {
  border-color: #d8b45f;
  box-shadow: 0 0 0 1px rgba(216, 180, 95, .14), 0 8px 28px rgba(24, 37, 31, .04);
}
.profile-public-card .profile-pro-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #dfb957;
  border-radius: 7px;
  background: linear-gradient(120deg, #fff4ce, #f4d478);
  color: #60410a;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
}
.profile-public-card .profile-public-card__hero {
  grid-template-columns: minmax(0, 1fr) auto;
}
.profile-public-card .profile-public-identity { grid-column: 1; }
.profile-public-card .profile-public-role-art { grid-column: 2; grid-row: 1; }
.profile-public-card .profile-public-name-row h1 {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.profile-public-card .profile-public-list-actions {
  position: static;
  inset: auto;
  grid-column: 1 / -1;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 8px;
  transform: none;
}
.profile-public-list-actions .list-btn { flex: 0 0 38px; min-width: 38px; min-height: 38px; }
.profile-public-card .profile-verification {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #e1e8e5;
  border-radius: 7px;
  background: #f5f7f6;
  color: #606e67;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.profile-verification svg { flex: 0 0 14px; }
.profile-public-card .profile-verification.is-verified {
  border-color: #c9e5dd;
  color: var(--primary, #0f766e);
  background: var(--primary-light, #eef7f5);
}
.profile-public-card a.profile-verification:hover { border-color: var(--primary, #0f766e); }
.profile-public-card a.profile-verification:focus-visible,
.profile-public-list-actions button:focus-visible { outline: 2px solid var(--primary, #0f766e); outline-offset: 3px; }
.profile-presence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: #68756e;
  font-size: .75rem;
  line-height: 1.45;
}
.profile-presence__dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #adb7b1; }
.profile-presence.is-online { color: #167b57; }
.profile-presence.is-online .profile-presence__dot { background: #199d6b; }
.profile-presence.is-recent .profile-presence__dot { background: #79a390; }
@media (max-width: 480px) {
  .profile-public-card .profile-public-card__hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .profile-public-card .profile-public-role-art { display: none; }
  .profile-public-card .profile-public-identity { align-items: flex-start; gap: 12px; }
  .profile-public-card .profile-public-avatar { width: 56px; height: 56px; flex-basis: 56px; }
  .profile-public-card .profile-public-list-actions { justify-self: start; }
  .profile-public-card .profile-public-name-row h1 { font-size: 1.4rem; }
  .profile-owner-modebar--inside-card .profile-activity-toggle__copy { white-space: normal; }
}

.profile-moderation-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 16px; margin-top: 16px; border-top: 1px solid #edf0ef; }
.profile-moderation-action small { color: #6b756f; font-size: .75rem; }
.profile-moderation-delete { padding: 8px 12px; border: 1px solid #e2bcbc; border-radius: 7px; background: #fff7f7; color: #9c3333; cursor: pointer; font: inherit; font-size: .8rem; }
.profile-moderation-delete:hover { background: #fceaea; }
.profile-moderation-delete:focus-visible { outline: 2px solid #9c3333; outline-offset: 3px; }


/* Scoped profile header overrides; the shared profile stylesheet stays in place. */
.profile-public-shell .profile-public-card .profile-avatar-button {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 104px;
  width:104px; height:104px; min-height:0; margin:0; padding:0;
  border:0; border-radius:50%; background:transparent; line-height:0;
  cursor:pointer; overflow:hidden; text-decoration:none; transform:none; box-shadow:none;
}
.profile-public-shell .profile-public-card .profile-avatar-button:hover { background:transparent; transform:none; }
.profile-public-shell .profile-public-card .profile-avatar-button:focus-visible { outline:2px solid var(--primary,#0f766e); outline-offset:4px; }
.profile-public-shell .profile-public-card .profile-public-avatar {
  display:block; width:104px; height:104px; flex:0 0 104px;
  max-width:none; margin:0; border-radius:50%; object-fit:cover;
}
.profile-public-shell .profile-public-card [data-profile-avatar-preview] { cursor:zoom-in; }
.profile-public-shell .profile-public-card .profile-public-short-bio {
  max-width:54ch; margin:7px 0 0; color:var(--text,#334155);
  font-size:.85rem; line-height:1.5; font-weight:400;
  text-align:left; overflow-wrap:anywhere;
}
.profile-public-shell .profile-public-card .profile-public-directions-body { display:grid; gap:7px; min-width:0; }
.profile-public-shell .profile-public-card .profile-public-needs {
  max-width:76ch; margin:0; color:var(--text-muted,#64748b);
  font-size:.76rem; line-height:1.5; font-weight:400; text-align:left;
  overflow-wrap:anywhere; white-space:pre-line;
}
.profile-public-shell .profile-public-card .profile-public-needs>span { font-weight:600; }
.profile-avatar-viewer:not([open]) { display:none; }
.profile-avatar-viewer {
  position:fixed; inset:0; width:max-content; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);
  box-sizing:border-box; margin:auto; padding:48px 16px 14px; overflow:auto;
  border:1px solid #9ca3af66; border-radius:16px; background:var(--background,#fff);
  color:var(--text,#1e293b); box-shadow:0 18px 60px #0005;
}
.profile-avatar-viewer::backdrop { background:#0f172acc; }
.profile-avatar-viewer [data-profile-avatar-large] {
  display:block; width:min(300px,calc(100vw - 66px)); height:auto; max-height:70vh;
  margin:0 auto; border-radius:10px; object-fit:contain;
}
.profile-avatar-viewer>p { margin:10px 0 0; max-width:300px; text-align:center; font-size:.82rem; line-height:1.4; overflow-wrap:anywhere; }
.profile-avatar-viewer .profile-avatar-viewer__close {
  position:absolute; top:3px; right:5px; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:0; padding:0; border:0; border-radius:50%;
  background:transparent; color:inherit; font:inherit; font-size:1.7rem; line-height:1; cursor:pointer;
}
.profile-avatar-viewer .profile-avatar-viewer__close:hover { background:#9ca3af22; }
.profile-avatar-viewer .profile-avatar-viewer__close:focus-visible { outline:2px solid var(--primary,#0f766e); outline-offset:-4px; }
body.profile-avatar-viewer-open { overflow:hidden; }
@media(max-width:600px) {
  .profile-public-shell .profile-public-card .profile-public-card__hero { grid-template-columns:minmax(0,1fr); gap:12px; }
  .profile-public-shell .profile-public-card .profile-public-identity { flex-direction:column; align-items:center; gap:12px; text-align:center; }
  .profile-public-shell .profile-public-card .profile-public-namebox { width:100%; }
  .profile-public-shell .profile-public-card .profile-public-name-row,
  .profile-public-shell .profile-public-card .profile-public-roleline,
  .profile-public-shell .profile-public-card .profile-presence { justify-content:center; }
  .profile-public-shell .profile-public-card .profile-avatar-button,
  .profile-public-shell .profile-public-card .profile-public-avatar { width:160px; height:160px; flex-basis:160px; }
  .profile-public-shell .profile-public-card .profile-public-short-bio { max-width:100%; margin:7px auto 0; text-align:center; font-size:.83rem; }
  .profile-public-shell .profile-public-card .profile-public-role-art { display:none; }
  .profile-public-shell .profile-public-card .profile-public-list-actions { justify-self:center; }
}

.profile-public-shell .profile-public-card .profile-public-needs {
  white-space: normal;
  margin: 0;
  padding: 0;
  line-height: 1.45;
}

.profile-public-shell .profile-public-card .profile-public-directions {
  margin-top: 10px;
  gap: 6px;
}

.profile-public-shell .profile-public-card .profile-public-directions-body {
  gap: 5px;
}