:root {
  --bg: #0f111a;
  --primary: #4f46e5;
  --accent: #10b981;
  --card: #111827;
  --muted: #94a3b8;
  --text: #e2e8f0;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: inherit; }
.page-shell { max-width: 1160px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.back-link { color: #c7d2fe; text-decoration: none; font-weight: 600; }
.back-link:hover { color: #a5b4fc; }

.profile-header {
  margin-top: 1rem;
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 1.5rem;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 1.5rem;
  background: linear-gradient(140deg, rgba(79, 70, 229, 0.2), rgba(15, 23, 42, 0.95));
}
.avatar {
  width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.6);
  display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: var(--primary);
  background: #0b1120;
}
.role-pill { display: inline-block; margin-top: 1rem; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid rgba(16,185,129,.5); color: #6ee7b7; font-size: .75rem; letter-spacing: .08em; font-weight: 700; }
h1 { margin: .75rem 0 .25rem; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height:1.15; }
.subtitle { color: #cbd5e1; margin: 0 0 .3rem; }
.meta, .rating { color: var(--muted); font-size: .95rem; }
.rating { margin: .4rem 0 1rem; }
.cta-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn { text-decoration: none; padding: .7rem 1rem; border-radius: .7rem; font-weight: 700; font-size: .95rem; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { border: 1px solid rgba(99,102,241,.7); color: #c7d2fe; }

.vetting-panel { background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(99,102,241,.5); border-radius: 1rem; padding: 1.2rem; box-shadow: 0 0 32px rgba(79,70,229,.18); }
.vetting-panel h2 { font-size: 1.2rem; margin: 0 0 .9rem; }
.badge-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
.badge-item { border: 1px solid rgba(148,163,184,.25); border-radius: .7rem; padding: .7rem; background: rgba(15,23,42,.6); }
.badge-top { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .92rem; }
.check { color: var(--accent); font-weight: 900; }
.unverified .check, .unverified .badge-top { color: #64748b; }
.badge-sub { color: var(--muted); font-size: .8rem; }

.content-card { margin-top: 1.4rem; border: 1px solid rgba(148,163,184,.22); border-radius: 1rem; background: rgba(15,23,42,.75); overflow: hidden; }
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(148,163,184,.2); }
.tab-btn { background: transparent; color: #cbd5e1; border: 0; padding: .85rem 1rem; cursor: pointer; font-weight: 600; }
.tab-btn.active { color: #fff; background: rgba(79,70,229,.25); }
.tab-panel { display: none; padding: 1.2rem; }
.tab-panel.active { display: block; }
.tab-panel h3 { margin-top: 0; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag { padding: .35rem .7rem; border-radius: 999px; background: rgba(79,70,229,.22); border: 1px solid rgba(99,102,241,.55); color: #c7d2fe; font-size: .85rem; }
.review, .vault-entry, .similar-card { border: 1px solid rgba(148,163,184,.22); border-radius: .8rem; padding: .9rem; background: rgba(15,23,42,.65); margin-bottom: .8rem; }
.review-head { display:flex; justify-content:space-between; gap:1rem; color:#cbd5e1; font-size:.92rem; }
.timeframe { display:inline-block; padding:.2rem .55rem; border-radius:999px; border:1px solid rgba(148,163,184,.5); color:#cbd5e1; font-size:.78rem; }
.verified { display:inline-block; margin-left:.4rem; color:#6ee7b7; border:1px solid rgba(16,185,129,.45); border-radius:999px; padding:.2rem .5rem; font-size:.75rem; }

.match-banner { margin-top:1.3rem; border-radius:1rem; padding:1.2rem; border:1px solid rgba(99,102,241,.5); background: rgba(79,70,229,.2); }
.match-banner h3 { margin:0 0 .3rem; }
.match-banner .btn-primary { display:inline-block; margin-top:.5rem; }

.similar-section { margin-top: 1.4rem; }
.similar-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.similar-card h4 { margin: .2rem 0; }
.similar-link { text-decoration:none; color:#c7d2fe; font-weight:700; }

@media (max-width: 900px) {
  .profile-header { grid-template-columns: 1fr; }
  .badge-grid, .similar-grid { grid-template-columns: 1fr; }
}