/* style.css — Paths relationship feature
   Design system: deep purple gradient #570B7D→#813FA2, pink accent #EC66B8,
   lavender surfaces, Libre Franklin. Desktop-first, scales to mobile. */

:root {
  --p-700:#3D0858; --p-600:#570B7D; --p-500:#813FA2; --pink:#EC66B8;
  --lav-50:#F7F1FB; --lav-100:#F3E5F8; --lav-200:#E7D4F0;
  --n-900:#1f1430; --n-700:#4a3f59; --n-600:#6b6478; --n-200:#e6e0ee;
  --white:#fff;
  --ok:#1f9d6b; --ok-bg:#e7f6ee; --neu:#2f6fd6; --neu-bg:#e8f0fc;
  --warn:#b9842a; --warn-bg:#fbf1de;
  --radius:16px; --radius-sm:12px;
  --shadow:0 10px 30px rgba(61,8,88,.10);
  --shadow-sm:0 4px 14px rgba(61,8,88,.08);
  --grad:linear-gradient(135deg,var(--p-600),var(--p-500));
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--n-900);
  background:
    radial-gradient(1200px 500px at 110% -10%, rgba(129,63,162,.10), transparent 60%),
    radial-gradient(900px 400px at -10% 0%, rgba(236,102,184,.08), transparent 55%),
    var(--lav-50);
  min-height:100vh; line-height:1.55;
}
a { color:var(--p-600); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---- top bar ---- */
.topbar {
  background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:20;
}
.topbar .brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; color:#fff; }
.topbar .brand:hover { text-decoration:none; }
.topbar .logo {
  width:34px; height:34px; border-radius:50%; background:#fff; color:var(--p-600);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px;
}
.topbar nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.topbar nav a {
  color:#fff; padding:8px 14px; border-radius:999px; font-weight:600; font-size:14px; opacity:.92;
}
.topbar nav a:hover { background:rgba(255,255,255,.16); text-decoration:none; opacity:1; }
.topbar nav a.active { background:rgba(255,255,255,.22); }

/* ---- layout ---- */
.wrap { max-width:1080px; margin:0 auto; padding:32px 24px 64px; }
.narrow { max-width:460px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.row { display:flex; gap:18px; flex-wrap:wrap; }

/* ---- cards ---- */
.card {
  background:var(--white); border:1px solid var(--n-200); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:24px;
}
.card.hero {
  background:var(--grad); color:#fff; border:none; box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.card.hero::after {
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:rgba(255,255,255,.10);
}
h1,h2,h3 { line-height:1.2; margin:0 0 10px; }
h1 { font-size:30px; font-weight:800; }
h2 { font-size:22px; font-weight:800; }
.muted { color:var(--n-600); }
.section-title { margin:30px 0 14px; font-size:20px; font-weight:800; }

/* ---- big number badge ---- */
.lp-circle {
  width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:44px; font-weight:900; background:rgba(255,255,255,.18); color:#fff; flex:0 0 auto;
}
.lp-circle.solid { background:var(--grad); color:#fff; }

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:var(--grad); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:13px 22px; font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s, opacity .18s;
  font-family:inherit;
}
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none; }
.btn.secondary { background:#fff; color:var(--p-600); border:1px solid var(--n-200); box-shadow:none; }
.btn.secondary:hover { background:var(--lav-100); }
.btn.block { width:100%; }
.btn.small { padding:8px 14px; font-size:13px; }
.btn.danger { background:#fff; color:#c0285a; border:1px solid #f3b9c8; box-shadow:none; }
.btn.danger:hover { background:#fdecef; }

/* ---- forms ---- */
label { display:block; font-weight:600; font-size:14px; margin:14px 0 6px; color:var(--n-700); }
input[type=text],input[type=email],input[type=password],input[type=date] {
  width:100%; padding:13px 14px; border:1px solid var(--n-200); border-radius:var(--radius-sm);
  font-size:15px; font-family:inherit; background:#fff; transition:border-color .18s, box-shadow .18s;
}
input:focus { outline:none; border-color:var(--p-500); box-shadow:0 0 0 3px rgba(129,63,162,.18); }

/* ---- badges / pills ---- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:13px; font-weight:700; }
.badge.lp { background:var(--lav-100); color:var(--p-600); }
.tag { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:13px; font-weight:700; }
.tag.compatible { background:var(--ok-bg); color:var(--ok); }
.tag.neutral { background:var(--neu-bg); color:var(--neu); }
.tag.incompatible { background:var(--warn-bg); color:var(--warn); }

/* ---- person card ---- */
.person { display:flex; align-items:center; gap:14px; position:relative; }
.person .avatar { width:52px; height:52px; border-radius:50%; background:var(--lav-200); flex:0 0 auto; }
.person .pname { font-weight:700; font-size:16px; }
.person .pmeta { font-size:13px; color:var(--n-600); margin-top:3px; }
.person .del {
  position:absolute; top:-6px; right:-6px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--n-200); background:#fff; color:var(--n-600); font-size:18px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .18s;
}
.card:hover .person .del { opacity:1; }
.person .del:hover { background:#fdecef; color:#c0285a; border-color:#f3b9c8; }
@media (hover:none){ .person .del{ opacity:1; } }

/* ---- alerts ---- */
.alert { padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:16px; }
.alert.error { background:#fdecef; color:#9a1f43; border:1px solid #f3b9c8; }
.alert.ok { background:var(--ok-bg); color:var(--ok); border:1px solid #bfe6d2; }

/* ---- search ---- */
.searchbar input { background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b6478' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center; padding-left:42px; }

/* ---- footer ---- */
.foot { text-align:center; color:var(--n-600); font-size:13px; padding:26px 16px 40px; }

/* ---- responsive ---- */
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){
  .grid{ grid-template-columns:1fr; }
  .wrap{ padding:20px 16px 56px; }
  h1{ font-size:25px; }
  .topbar{ padding:12px 16px; }
  .topbar nav a{ padding:7px 10px; font-size:13px; }
  .hide-sm{ display:none; }
}