/* core/static/core/css/settings.css */

/* ——— Card + profile header ——— */
.linktree-card{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  transition:all .3s ease;
  overflow:hidden;
}
.linktree-card:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.15) }

.profile-section{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff; padding:2rem; text-align:center; position:relative;
}
.profile-section::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(102,126,234,.9),rgba(118,75,162,.9));
  backdrop-filter:blur(10px);
}
.profile-section *{ position:relative; z-index:1 }

.avatar-container{ position:relative; display:inline-block; margin-bottom:1rem }
.avatar{
  width:100px; height:100px; border-radius:50%;
  border:4px solid rgba(255,255,255,.3); object-fit:cover;
}
.avatar-placeholder{
  width:100px; height:100px; border-radius:50%;
  border:4px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; font-weight:700; background:rgba(255,255,255,.2);
}
.edit-avatar-btn{
  position:absolute; bottom:0; right:0; width:32px; height:32px; border-radius:50%;
  background:#667eea; border:2px solid #fff; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s ease; box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.edit-avatar-btn:hover{ background:#5a67d8; transform:scale(1.1); box-shadow:0 4px 12px rgba(0,0,0,.3) }

/* ——— Link rows ——— */
.link-item{
  display:flex; align-items:center; padding:1rem 1.5rem; text-decoration:none; color:#1f2937;
  border-bottom:1px solid rgba(0,0,0,.05); transition:all .3s ease; position:relative; overflow:hidden;
}
.link-item:hover{ background:linear-gradient(90deg,rgba(102,126,234,.1),rgba(118,75,162,.1)); transform:translateX(4px) }
.link-item:last-child{ border-bottom:none }
.link-icon{ width:24px; height:24px; margin-right:1rem; opacity:.7 }
.link-text{ flex:1; font-weight:600 }
.link-arrow{ opacity:.4; transition:all .3s ease }
.link-item:hover .link-arrow{ opacity:1; transform:translateX(4px) }

/* ——— Content list + filters ——— */
.content-section{ margin-top:2rem }
.section-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem; background:linear-gradient(90deg,#f8fafc,#f1f5f9);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.section-title{ font-size:1.25rem; font-weight:700; color:#1f2937 }

.filter-tabs{
  display:flex; gap:.5rem; margin:1rem 1.5rem; padding:.25rem; background:#f8fafc; border-radius:12px;
}
.filter-tab{
  flex:1; padding:.5rem; text-align:center; border-radius:8px; font-size:.875rem; font-weight:600;
  cursor:pointer; transition:all .2s ease; border:none; background:transparent;
}
.filter-tab.active{ background:#fff; color:#667eea; box-shadow:0 2px 4px rgba(0,0,0,.1) }

.content-item{
  padding:1rem 1.5rem; border-bottom:1px solid rgba(0,0,0,.05);
  transition:all .3s ease; cursor:pointer; position:relative;
  display:flex; align-items:flex-start; justify-content:space-between;
}
.content-item:hover{ background:rgba(102,126,234,.05) }
.content-item-main{ flex:1; margin-right:1rem }
.content-title{ font-weight:600; margin-bottom:.5rem; color:#1f2937 }
.content-meta{ display:flex; align-items:center; gap:1rem; font-size:.875rem; color:#6b7280 }
.content-stats{ display:flex; gap:1rem; margin-top:.5rem }
.stat-item{ display:flex; align-items:center; gap:.25rem; font-size:.75rem; color:#9ca3af }

/* empty state */
.empty-state{ text-align:center; padding:3rem 1.5rem; color:#9ca3af }
.empty-state-icon{ font-size:3rem; margin-bottom:1rem; opacity:.5 }

/* ——— Forms ——— */
.edit-profile-section{ padding:1.5rem }
.form-group{ margin-bottom:1rem }
.form-label{ display:block; margin-bottom:.5rem; font-weight:600; color:#374151 }
.form-input{
  width:100%; padding:.75rem; border:1px solid #d1d5db; border-radius:8px; font-size:1rem; transition:all .2s ease;
}
.form-input:focus{ outline:0; border-color:#667eea; box-shadow:0 0 0 3px rgba(102,126,234,.1) }
.form-textarea{ resize:vertical; min-height:80px }

.btn-primary{
  background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; padding:.75rem 1.5rem;
  border-radius:12px; border:0; font-weight:600; cursor:pointer; transition:all .2s ease;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(102,126,234,.3) }
.btn-secondary{
  background:#f8fafc; color:#374151; padding:.75rem 1.5rem; border-radius:12px; border:1px solid #d1d5db;
  font-weight:600; cursor:pointer; transition:all .2s ease; text-decoration:none;
}
.btn-secondary:hover{ background:#f1f5f9 }
.btn-danger{
  background:#ef4444; color:#fff; padding:.75rem 1.5rem; border-radius:12px; border:0; font-weight:600; cursor:pointer; transition:all .2s ease;
}
.btn-danger:hover{ background:#dc2626; transform:translateY(-1px) }

/* ——— 3-dots menu: visible on touch, reveal-on-hover on desktop ——— */
.content-menu-btn{
  background:none; border:none; padding:.5rem; border-radius:8px; cursor:pointer;
  color:#9ca3af; transition:all .2s ease; position:relative;
  opacity:1; transform:none;  /* visible by default for mobile */
}
@media (hover:hover) and (pointer:fine){
  .content-menu-btn{ opacity:0; transform:translateX(10px) }
  .content-item:hover .content-menu-btn{ opacity:1; transform:translateX(0) }
}
.content-menu-btn:hover{ background:#f3f4f6; color:#374151 }

.content-menu{
  position:absolute; top:100%; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  box-shadow:0 10px 25px rgba(0,0,0,.1); z-index:50; min-width:120px; display:none;
}
.content-menu.show{ display:block }
.content-menu-item{
  padding:.75rem 1rem; cursor:pointer; font-size:.875rem; font-weight:500; transition:all .2s ease;
  border-bottom:1px solid #f3f4f6; display:flex; align-items:center; gap:.5rem;
}
.content-menu-item:last-child{ border-bottom:none }
.content-menu-item:hover{ background:#f9fafb }
.content-menu-item.danger:hover{ background:#fef2f2; color:#dc2626 }

/* ——— Modals ——— */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  z-index:1000; display:none; align-items:flex-start; justify-content:center; padding-top:20vh;
}
.modal.show{ display:flex }
.modal-content{
  background:#fff; border-radius:16px; padding:1.5rem; max-width:350px; width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.3); transform:translateY(-50px); transition:transform .3s ease;
}
.modal.show .modal-content{ transform:translateY(0) }
.modal-content.wide{ max-width:500px }
.modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem }
.modal-title{ font-size:1.1rem; font-weight:700 }
.close-btn{
  width:28px; height:28px; border-radius:50%; border:none; background:#f3f4f6; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s ease; font-size:18px; line-height:1;
}
.close-btn:hover{ background:#e5e7eb }

/* ——— Upload area ——— */
.upload-drop-zone{
  border:2px dashed #d1d5db; border-radius:12px; padding:2rem 1rem; text-align:center; transition:all .2s ease;
  cursor:pointer; margin-bottom:1rem;
}
.upload-drop-zone:hover, .upload-drop-zone.dragover{
  border-color:#667eea; background:rgba(102,126,234,.05)
}
.upload-icon{ font-size:2rem; margin-bottom:.5rem; opacity:.7 }
.upload-text{ font-size:.875rem; color:#6b7280 }
.upload-progress{ display:none; margin-top:1rem }
.progress-bar{ width:100%; height:6px; background:#f3f4f6; border-radius:3px; overflow:hidden }
.progress-fill{ height:100%; background:linear-gradient(90deg,#667eea,#764ba2); width:0%; transition:width .3s ease }
.loading-spinner{ display:none; width:20px; height:20px; border:2px solid #f3f4f6; border-top:2px solid #667eea; border-radius:50%; animation:spin 1s linear infinite; margin:0 auto }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }