/* public/profile.css */

/* Profile Layout */
.profile-wrapper { max-width: 720px; margin: 0 auto; background: #fff; min-height: 100vh; box-shadow: 0 0 40px rgba(0,0,0,0.05); position: relative; padding-bottom:80px; }
.hero-banner { height: 200px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); transition: background 0.5s ease; position: relative; }
.hero-header { padding: 0 24px 24px; margin-top: -70px; position: relative; border-bottom: 1px solid #f1f5f9; }

/* Avatar */
.avatar-container { position: relative; width: 130px; height: 130px; margin-bottom: 16px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; opacity: 0; cursor: pointer; transition: 0.2s; pointer-events: none; }
.profile-wrapper.editing .avatar-upload-overlay { pointer-events: auto; }
.profile-wrapper.editing .avatar-container:hover .avatar-upload-overlay { opacity: 1; }

/* User Info */
.user-info h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verified-icon { color: #2563eb; font-size: 1.2rem; vertical-align: middle; margin-right: 4px; }
.kmca-tag { font-size: 0.75rem; color: #4f46e5; background: #eef2ff; padding: 4px 10px; border-radius: 6px; font-weight: 700; border: 1px solid #e0e7ff; vertical-align: middle; }
.user-bio { font-size: 1rem; color: #64748b; margin-bottom: 24px; word-break: keep-all; white-space: pre-line; }

/* Stats */
.stats-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; background: #f8fafc; border-radius: 16px; border: 1px solid #f1f5f9; }
.stat-cell { text-align: center; }
.stat-val { font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.stat-label { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; margin-top: 4px; }

/* Sections */
.p-section { padding: 40px 24px; border-bottom: 1px solid #f1f5f9; }
.p-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.p-section-title { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: 8px; color: #0f172a; }
.trust-badge { font-size: 0.7rem; font-weight: 700; padding: 4px 8px; border-radius: 4px; display: flex; align-items: center; gap: 4px; }
.tb-verified { color: #059669; background: #ecfdf5; }
.tb-self { color: #64748b; background: #f1f5f9; }

/* Edit UI */
.edit-controls { display: none; margin-top: 10px; animation: fadeIn 0.3s; }
.profile-wrapper.editing .edit-controls { display: block; }
.profile-wrapper.editing .view-only { display: none; }
.edit-input { width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.95rem; margin-bottom: 8px; font-family: inherit; }
.edit-textarea { width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; resize: none; height: 100px; font-family: inherit; }

/* FAB & Picker */
.fab-edit { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 30px; background: #0f172a; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: 0.3s; z-index: 100; }
.fab-edit:hover { transform: scale(1.1); background: #4f46e5; }
.gradient-picker { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); padding: 10px; border-radius: 12px; display: none; grid-template-columns: repeat(5, 1fr); gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.profile-wrapper.editing .gradient-picker { display: grid; }
.g-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.g-swatch:hover { transform: scale(1.1); border-color: #fff; }

/* Resume & Tags */
.resume-item { position: relative; padding-left: 20px; border-left: 2px solid #f1f5f9; margin-bottom: 20px; }
.resume-item.editing-item { border-left: 2px solid #4f46e5; padding-right: 40px; }
.resume-controls { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 4px; }
.control-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; background: #f1f5f9; color: #64748b; }
.btn-delete { color: #ef4444; }
.tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag { font-size: 0.85rem; color: #64748b; background: #f8fafc; padding: 6px 14px; border-radius: 20px; border: 1px solid #e2e8f0; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.tag i { cursor: pointer; color: #cbd5e1; } .tag i:hover { color: #ef4444; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }