/* Profile page-specific styles */

/* Creator Setup Panel */
.creator-setup-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: var(--space-6);
  margin: var(--space-6) var(--space-4);
  display: none;
  animation: creatorSlideIn 0.25s ease-out;
}
.creator-setup-panel--visible { display: block; }
@keyframes creatorSlideIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.creator-setup-panel__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-1); }
.creator-setup-panel__desc { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.creator-setup-panel .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; }
.creator-setup-panel .toggle-row__label { font-size: var(--text-base); color: var(--text-primary); font-weight: var(--weight-medium); }
.creator-setup-panel .toggle-row__desc { font-size: var(--text-xs); color: var(--text-muted); }
.creator-setup-panel .toggle-switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.creator-setup-panel .toggle-switch input { opacity: 0; width: 0; height: 0; }
.creator-setup-panel .toggle-switch__slider { position: absolute; inset: 0; background: var(--card-border); border-radius: 26px; cursor: pointer; transition: 0.2s; }
.creator-setup-panel .toggle-switch__slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: 0.2s; }
.creator-setup-panel .toggle-switch input:checked + .toggle-switch__slider { background: var(--green-bright); }
.creator-setup-panel .toggle-switch input:checked + .toggle-switch__slider::before { transform: translateX(22px); }
.creator-tier-card { background: var(--bg-secondary); border: 1px solid var(--card-border); border-radius: 12px; padding: var(--space-4); margin-bottom: var(--space-3); }
.creator-tier-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.creator-tier-card__name { font-weight: var(--weight-semibold); color: var(--text-primary); }
.creator-tier-card__price { color: var(--green-bright); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.creator-tier-card__duration { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.creator-tier-card__actions { display: flex; gap: var(--space-2); }
.creator-tier-btn { padding: 4px 10px; border-radius: 6px; font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; border: none; font-family: inherit; }
.creator-tier-btn--edit { background: rgba(0,255,135,0.1); color: var(--green-bright); }
.creator-tier-btn--remove { background: rgba(255,71,87,0.1); color: #ff4757; }
.creator-tier-form { display: none; padding: var(--space-4); background: var(--bg-secondary); border: 1px dashed var(--green-bright); border-radius: 12px; margin-bottom: var(--space-3); }
.creator-tier-form--visible { display: block; }
.creator-tier-form .form-field { margin-bottom: var(--space-3); }
.creator-tier-form .form-field label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: var(--space-1); }
.creator-tier-form .form-field input, .creator-tier-form .form-field select { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--bg-primary); color: var(--text-primary); font-size: var(--text-base); font-family: inherit; }
.creator-tier-form .form-field input:focus, .creator-tier-form .form-field select:focus { outline: none; border-color: var(--green-bright); box-shadow: 0 0 0 2px rgba(0,255,135,0.1); }
.creator-tier-form .form-field .hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.creator-tier-form__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.creator-btn-save { background: var(--green-bright); color: #0a0f1c; border: none; padding: 8px 16px; border-radius: 8px; font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; font-family: inherit; }
.creator-btn-cancel { background: transparent; color: var(--text-secondary); border: 1px solid var(--card-border); padding: 8px 16px; border-radius: 8px; font-weight: var(--weight-medium); font-size: var(--text-sm); cursor: pointer; font-family: inherit; }
.creator-btn-add-tier { background: transparent; color: var(--green-bright); border: 1px dashed var(--green-bright); padding: 12px; border-radius: 10px; font-weight: var(--weight-medium); font-size: var(--text-sm); cursor: pointer; font-family: inherit; width: 100%; transition: background 0.15s; }
.creator-btn-add-tier:hover { background: rgba(0,255,135,0.05); }
.creator-banner { background: linear-gradient(135deg, rgba(0,255,135,0.08), rgba(0,229,160,0.04)); border: 1px solid rgba(0,255,135,0.15); border-radius: 14px; padding: var(--space-5); margin-bottom: var(--space-4); text-align: center; }
.creator-banner__title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--green-bright); margin-bottom: var(--space-1); }
.creator-banner__text { color: var(--text-muted); font-size: var(--text-sm); }
.creator-save-profile-btn { background: var(--green-bright); color: #0a0f1c; border: none; padding: 10px 20px; border-radius: 10px; font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; font-family: inherit; margin-top: var(--space-3); }
.creator-save-profile-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Subscribed badge + countdown */
.sub-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,229,160,0.1); border: 1px solid rgba(0,229,160,0.25); padding: 6px 14px; border-radius: 8px; font-size: var(--text-sm); color: var(--green-bright); font-weight: var(--weight-semibold); }
.sub-badge svg { flex-shrink: 0; }
.sub-countdown { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); padding: 2px 8px; border-radius: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.sub-countdown strong { color: var(--text-secondary); font-weight: var(--weight-semibold); }
.creator-payout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.creator-payout-card { background: var(--bg-secondary); border-radius: 10px; padding: var(--space-4); text-align: center; }
.creator-payout-card__label { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.creator-payout-card__value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--green-bright); }
.creator-empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--text-muted); }

/* Social proof badges */
.profile-header__social-badges { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-2); flex-wrap: wrap; }

/* Avatar row: push CTA to the right */
.profile-header__avatar-row { justify-content: space-between !important; align-items: center !important; }
.profile-social-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: var(--text-sm); font-weight: var(--weight-medium); background: rgba(0,229,160,0.06); border: 1px solid rgba(0,229,160,0.12); color: var(--text-secondary); }
.profile-social-badge strong { color: var(--green-bright); font-weight: var(--weight-bold); }
.profile-social-badge--revenue { background: rgba(240,185,11,0.06); border-color: rgba(240,185,11,0.15); }
.profile-social-badge--revenue strong { color: #f0b90b; }

/* Enhanced CTA: pulsing subscribe button */
@keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,160,0.4); } 50% { box-shadow: 0 0 16px 4px rgba(0,229,160,0.2); } }
.profile-subscribe-cta { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 22px; border-radius: 14px; background: linear-gradient(135deg, #00e5a0, #00c48c); color: #0a0f1c; border: none; font-weight: var(--weight-bold); font-size: var(--text-base); font-family: inherit; cursor: pointer; animation: ctaPulse 2.5s infinite; transition: transform 0.15s, box-shadow 0.2s; }
.profile-subscribe-cta:hover { transform: scale(1.04); animation: none; box-shadow: 0 0 20px 6px rgba(0,229,160,0.35); }
.profile-subscribe-cta__price { font-size: var(--text-xs); font-weight: var(--weight-medium); opacity: 0.75; margin-top: 2px; }

/* Featured / Pinned post card */
.featured-post { margin: var(--space-4) 0; padding: 0 var(--space-4); }
.featured-post__banner { background: linear-gradient(135deg, rgba(0,229,160,0.07), rgba(0,229,160,0.02)); border: 1px solid rgba(0,229,160,0.2); border-radius: 14px; padding: var(--space-5); position: relative; overflow: hidden; }
.featured-post__banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,229,160,0.6), transparent); }
.featured-post__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--green-bright); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-3); }
.featured-post__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-1); }
.featured-post__excerpt { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-post__read { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--green-bright); cursor: pointer; text-decoration: none; }
.featured-post__read:hover { text-decoration: underline; }

/* Modal styles (previously injected via JS) */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;}
.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:999;}
.modal-panel{background:#111620;border:1px solid rgba(0,229,160,0.15);border-radius:14px;width:100%;margin:0 16px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.06);}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:0 4px;line-height:1;}
.modal-close:hover{color:#fff;}
.btn-creator-action:hover{filter:brightness(1.1);}