*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#ffffff;--fg:#0b0b0b;--muted:#a1a1a1;--brand:#000000}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);padding-bottom:56px}

.topbar{position:fixed;top:0;left:0;right:0;background:#0d0d0d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 2rem;z-index:10}
.topbar .brand{font-weight:700;letter-spacing:.2px;font-size:1.2rem}
.topbar-left{display:flex;align-items:center;gap:1rem}
.logo{font-weight:bold;font-size:1.2rem}
.nav-pills{display:flex;align-items:center;gap:1.5rem}
.pill{display:inline-block;padding:0.4rem 0.9rem;border-radius:20px;background:#fff;color:#000;text-decoration:none;font-weight:600}

.onboarding{min-height:100vh;padding-top:84px}
.search-row{display:flex;justify-content:center;margin:24px 0}
.searchbar{position:relative;display:flex;align-items:center;gap:10px;width:760px;max-width:90%;background:#f2f2f2;border-radius:22px;padding:10px 16px}
.searchbar input{flex:1;border:none;background:transparent;outline:none;font-size:14px;color:#444}
.searchbar .filter, .searchbar .refresh{background:#efefef;border:1px solid #dedede;border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.searchbar .filter:hover, .searchbar .refresh:hover{background:#e0e0e0}

.cards-grid{max-width:1120px;margin:10px auto 20px;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.talent-card{background:#ffffff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:18px;display:flex;flex-direction:column;gap:10px}
.talent-card.gradient-violet{background:radial-gradient(160px 160px at 40px 40px,#eae7ff,#e9f1ff 60%,#ffffff)}
.talent-card.gradient-pink{background:radial-gradient(160px 160px at 40px 40px,#ffe5f0,#fff3f7 60%,#ffffff)}
.mentor{font-size:12px;color:#6f6f6f;margin-bottom:6px}
.avatar-block{position:relative;display:flex;align-items:center;gap:12px}
.progress-ring{width:86px;height:86px;position:relative}
.progress-ring .ring{width:86px;height:86px;border-radius:50%;background:conic-gradient(#4f46e5 calc(var(--pct,40)*1%),#e6e6e6 0);display:flex;align-items:center;justify-content:center;padding:5px}
.progress-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mentor-badges{position:absolute;left:62px;top:60px;display:flex;gap:6px}
.mentor-badges span{width:28px;height:28px;border-radius:50%;background:#66bb6a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.person .name{font-weight:700;margin-top:6px}
.person .title{font-size:12px;color:#8a8a8a}
.stats{display:flex;gap:10px;margin-top:6px}
.stats span{font-size:12px;background:#f5f5f5;border-radius:10px;padding:3px 8px}
.actions{display:flex;gap:8px;margin-top:6px}
.btn.tiny{font-size:11px;padding:6px 10px;border-radius:14px;border:none;background:#0d0d0d;color:#fff;cursor:pointer}
.btn.tiny.light{background:#f2f2f2;color:#222}
.feedback-chip{margin-top:8px;background:#ffffffd8;border:1px solid #ececec;border-radius:14px;padding:8px 10px;font-size:11px;color:#333}

.actions-row{display:flex;gap:10px;margin-top:8px}
.btn.small{font-size:12px;padding:8px 16px;border-radius:20px;border:none;background:#0d0d0d;color:#fff;cursor:pointer;font-weight:500;transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.btn.small:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.15)}
.btn.small.light{background:#f2f2f2;color:#222;border:1px solid #e0e0e0}
.btn.small.light:hover{background:#e8e8e8;border-color:#d0d0d0}

.card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}


.btn-delete{background:#ff4757;color:#fff;border:none;border-radius:20px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:12px;transition:background-color .2s, transform .1s}
.btn-delete:hover{background:#ff3742}
.btn-delete:active{transform:translateY(1px)}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.notes{max-width:1000px;margin:16px auto 90px;padding:0 20px;color:#000}
.notes ol{font-size:12px;color:#222;margin-left:16px}
.notes .question{text-align:center;margin-top:16px}

.no-talents-message {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  text-align: center;
}

.no-talents-content {
  max-width: 400px;
  padding: 2rem;
}

.no-talents-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.no-talents-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.no-talents-content p {
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background: #0d0d0d;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background: #333;
}

.page-footer{position:fixed;left:0;right:0;bottom:0;background:#000;color:#fff;text-align:center;padding:12px 10px;font-size:12px;z-index:1000;box-shadow:0 -2px 8px rgba(0,0,0,0.15)}

/* Add Manager button aligned right */
.manager-actions{max-width:1120px;margin:0 auto 10px;padding:0 20px;display:flex;justify-content:flex-end}

/* Modal styling */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:none;align-items:center;justify-content:center;z-index:2000}
.modal-backdrop[aria-hidden="false"]{display:flex}
.modal{width:560px;max-width:92%;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.25);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee;background:#fafafa}
.modal-close{background:transparent;border:none;font-size:20px;cursor:pointer}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#555}
.form-grid input,.form-grid select{padding:10px 12px;border:1px solid #ddd;border-radius:8px;outline:none}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:10px 16px;border-top:1px solid #eee;background:#fafafa}

@media (max-width: 900px){.cards-grid{grid-template-columns:1fr 1fr}.searchbar{width:100%}}
@media (max-width: 600px){.cards-grid{grid-template-columns:1fr}}