/* ==== From index/about/contact inline CSS (consolidated) ==== */

    :root{
      --bg:#ffffff; --text:#0b1220; --muted:#4b5563; --border:#e5e7eb;
      --panel:#ffffff; --panel-2:#f9fafb; --soft:#f3f4f6;
      --g1:#7c3aed; --g2:#3b82f6;

      /* 3D button colors */
      --btn-dark:#0b7a33;      /* end */
      --btn-dark2:#0e9a41;     /* start */
      --btn-shadow:rgba(3,102,38,.45);
      --btn-gloss:rgba(255,255,255,.55);
      --btn-press:rgba(0,0,0,.18);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    a{color:inherit;text-decoration:none}

    .wrap{max-width:1080px;margin:0 auto;padding:20px}
    @media (max-width:480px){.wrap{padding:10px}}

    /* Header (not fixed) */
    header{border-bottom:1px solid var(--border);background:#fff;position:static}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800}
    .logo-img{height: 64px;width:auto;display:block}
    @media (max-width:768px){
  .logo-img{height: 48px}
}

    .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--g1),var(--g2))}
    .links{display:flex;gap:18px}
    .links a{color:#111827}
    .burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
    .burger svg{width:22px;height:22px}
    @media (max-width:768px){.links{display:none}.burger{display:inline-flex}}
    .mnav{display:none;position:fixed;left:10px;right:10px;top:64px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 48px rgba(17,24,39,.16);padding:10px;z-index:40}
    .mnav a{display:block;padding:12px 10px;border-radius:10px}
    .mnav a:hover{background:#f9fafb}
    .mnav.open{display:block}

    /* Hero + search card */
    .hero{padding:42px 0 0}
    .search-card{
      max-width:940px;margin:0 auto;background:#fff;border:2px solid var(--border);border-radius:22px;
      box-shadow:0 18px 60px rgba(17,24,39,.10), 0 6px 18px rgba(17,24,39,.06);
      padding:28px 26px;
    }
    @media (max-width:480px){.search-card{padding:18px 14px}}

    .search-card h1{margin:0 0 16px;font-size:clamp(30px,5vw,48px);letter-spacing:-.02em;text-align:center}
    .search-card p.lead{margin:0 auto 18px;max-width:800px;font-size:18px;line-height:1.7;text-align:center}
    @media (max-width:480px){.search-card p.lead{font-size:16px}}

    .search{max-width:760px;margin:0 auto;display:flex;align-items:stretch;gap:12px;flex-wrap:nowrap}
    .search input{
      flex:1 1 auto;min-width:0;height:68px;font-size:18px;padding:0 20px;border-radius:16px;
      border:2px solid #d1d5db;background:#fff;box-shadow:0 10px 26px rgba(17,24,39,.06);
      outline:none;transition:box-shadow .15s ease, border-color .15s ease;text-align:left;
    }
    .search input:focus{border-color:#a5b4fc;box-shadow:0 12px 28px rgba(59,130,246,.20), 0 0 0 4px rgba(59,130,246,.12)}
    .search button{
      flex:0 0 auto;height:68px;padding:0 26px;font-size:18px;font-weight:800;white-space:nowrap;min-width:190px;
      border:none;border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--btn-dark2),var(--btn-dark));box-shadow:0 10px 24px var(--btn-shadow);cursor:pointer
    }
    @media (max-width:760px){.search{flex-direction:column}.search button{width:100%;min-width:0}}
    @media (max-width:480px){.search input,.search button{height:56px;font-size:16px;border-radius:14px}}

    /* Spinner */
    .progress-row{display:none;align-items:center;gap:12px;justify-content:center;margin:14px auto 0}
    .progress-row.active{display:flex}
    .spinner{
      width:26px;height:26px;border-radius:50%;
      background: conic-gradient(from 0deg, rgba(59,130,246,1), rgba(124,58,237,1), rgba(34,197,94,1), rgba(59,130,246,1));
      -webkit-mask: radial-gradient(circle 8px at 50% 50%, transparent 6px, #000 7px);
              mask: radial-gradient(circle 8px at 50% 50%, transparent 6px, #000 7px);
      animation: spin 1s linear infinite; box-shadow: 0 4px 18px rgba(59,130,246,.25);
    }
    @keyframes spin { to { transform: rotate(360deg) } }
    .progress-text{color:#374151;font-weight:700}

    /* Results panel inside the card */
    .results-panel{margin-top:18px;border-top:1px solid var(--border);padding-top:18px}

    /* INFO message (not green) */
    .cta-block{
      margin:0 auto 14px;max-width:860px;
      background:#EFF6FF;               /* light blue */
      border:1px solid #BFDBFE;
      color:#1E3A8A;                     /* dark blue text */
      border-radius:14px;padding:14px 12px;text-align:center;
      box-shadow:0 8px 18px rgba(17,24,39,.04);
      font-weight:400; line-height:1.55;
    }

    .grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:860px;margin:0 auto}

    /* Profile card */
    .profile{
      display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;
      background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 26px rgba(17,24,39,.06);padding:16px;
    }
    .profile .avatar{width:112px;height:112px;border-radius:14px;object-fit:cover;background:#f3f4f6}
    .meta-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
    .name{font-size:20px;font-weight:800;color:#0b1220}
    .age{color:#6b7280;font-weight:600;margin-left:2px}
    .badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid #d1fae5;color:#065f46;background:#ecfdf5}
    .sub{color:#6b7280;font-size:14px;margin-bottom:8px}
    .facts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
    .pill{font-size:12px;line-height:1;padding:8px 10px;border-radius:999px;background:#f3f4f6;color:#0b1220;border:1px solid #e5e7eb}
    .bio{color:#374151;line-height:1.55;margin:6px 0 10px}
    .actions{display:flex;gap:12px;flex-wrap:wrap}

    /* 3D Partner button */
    .btn-3d{
      --start: var(--btn-dark2);
      --end:   var(--btn-dark);
      display:inline-flex;align-items:center;gap:10px;
      padding:14px 18px;border-radius:12px;
      background:linear-gradient(180deg, var(--start), var(--end));
      color:#fff;font-weight:900;letter-spacing:.1px;
      border:1px solid rgba(0,0,0,.18);
      box-shadow:
        0 14px 28px var(--btn-shadow),
        inset 0 1px 0 var(--btn-gloss),
        inset 0 -1px 0 rgba(0,0,0,.06);
      text-shadow:0 1px 0 rgba(0,0,0,.25);
      transform:translateY(0); transition:transform .06s ease, box-shadow .06s ease, filter .06s ease;
    }
    .btn-3d .uname{
      background:#ffffff;color:#065f46;border-radius:999px;padding:4px 10px;font-weight:900;
      box-shadow:0 1px 0 rgba(17,24,39,.08), inset 0 0 0 1px rgba(16,185,129,.25);
    }
    .btn-3d:hover{filter:brightness(1.03)}
    .btn-3d:active{
      transform:translateY(1px);
      box-shadow:
        0 8px 18px var(--btn-press),
        inset 0 1px 0 rgba(255,255,255,.35);
    }

    @media (max-width:640px){
      .profile{grid-template-columns:1fr;padding:12px}
      .profile .avatar{width:100%;height:160px}
    }

    /* SEO blocks */
    .stack{max-width:980px;margin:42px auto}
    @media (max-width:640px){.stack{padding:0 10px}}
    .shape{position:relative;margin:28px 0 80px}
    .accent{position:absolute;pointer-events:none;z-index:0;background:linear-gradient(135deg,var(--g1),var(--g2));filter:drop-shadow(0 12px 26px rgba(59,130,246,.28))}
    .accent.bl{left:-26px;bottom:-26px;width:48%;height:46px;transform:skewX(-18deg);border-bottom-left-radius:14px;border-top-right-radius:14px}
    .accent.tr{right:-26px;top:-26px;width:48%;height:46px;transform:skewX(-18deg);border-top-right-radius:14px;border-bottom-left-radius:14px}
    .card{position:relative;z-index:1;background:#fff;border-radius:20px;padding:26px 22px;box-shadow:0 18px 40px rgba(17,24,39,.08);border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--g1),var(--g2)) border-box}
    @media (max-width:480px){.card{padding:18px}}
    .card h2{margin:0 0 12px;font-size:22px;font-weight:800;color:#0b1220}
    .card p{margin:10px 0;line-height:1.85;color:#111827}
    .card blockquote{margin:12px 0;padding:12px 16px;border-left:4px solid #7c3aed;background:#f3f4ff;border-radius:10px;color:#0b1220}

    /* Footer */
    footer .wrap{border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;gap:16px;padding:20px 0;color:#6b7280;font-size:14px;flex-wrap:wrap}
  


    :root{--bg:#ffffff;--text:#111827;--muted:#475569;--border:#e5e7eb;
          --g1:#7c3aed;--g2:#3b82f6;--ring:#6ea8ff;--radius:22px;
          --shadow:0 25px 80px rgba(2,6,23,.08),0 8px 24px rgba(2,6,23,.06)}
    *{box-sizing:border-box}
    html,body{margin:0;background:var(--bg);color:var(--text);
      font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    a{color:inherit;text-decoration:none}
    .wrap{max-width:1100px;margin:0 auto;padding:20px}
    header{background:#fff;border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800}
    .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--g1),var(--g2))}
    .links{display:flex;gap:18px}
    main{padding:42px 0}
    .shape{position:relative;margin:28px auto 80px;max-width:980px}
    .accent{position:absolute;pointer-events:none;z-index:0;background:linear-gradient(135deg,var(--g1),var(--g2));filter:drop-shadow(0 12px 26px rgba(59,130,246,.28))}
    .accent.bl{left:-26px;bottom:-30px;width:48%;height:58px;transform:skewX(12deg);border-radius:14px 10px 12px 12px}
    .accent.tr{right:-26px;top:-28px;width:48%;height:54px;transform:skewX(-12deg);border-radius:14px 10px 8px 14px}
    .card{position:relative;z-index:1;background:#fff;border-radius:var(--radius);padding:36px 28px;box-shadow:var(--shadow);border:2px solid var(--ring)}
    h1{margin:0 0 18px;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.01em}
    p{margin:0 0 18px;color:var(--muted);font-size:clamp(18px,1.4vw,20px);line-height:1.85}
    footer{border-top:1px solid var(--border);color:#6b7280;font-size:14px}
  


    :root{--bg:#ffffff;--text:#111827;--muted:#475569;--border:#e5e7eb;
          --g1:#7c3aed;--g2:#3b82f6;--ring:#6ea8ff;--radius:22px;
          --shadow:0 25px 80px rgba(2,6,23,.08),0 8px 24px rgba(2,6,23,.06)}
    *{box-sizing:border-box}
    html,body{margin:0;background:var(--bg);color:var(--text);
      font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    a{color:inherit;text-decoration:none}
    .wrap{max-width:1100px;margin:0 auto;padding:20px}
    header{background:#fff;border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800}
    .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--g1),var(--g2))}
    .links{display:flex;gap:18px}
    main{padding:42px 0}
    .shape{position:relative;margin:28px auto 80px;max-width:900px}
    .accent{position:absolute;pointer-events:none;z-index:0;background:linear-gradient(135deg,var(--g1),var(--g2));filter:drop-shadow(0 12px 26px rgba(59,130,246,.28))}
    .accent.bl{left:-26px;bottom:-30px;width:48%;height:58px;transform:skewX(12deg);border-radius:14px 10px 12px 12px}
    .accent.tr{right:-26px;top:-28px;width:48%;height:54px;transform:skewX(-12deg);border-radius:14px 10px 8px 14px}
    .card{position:relative;z-index:1;background:#fff;border-radius:var(--radius);padding:36px 28px;box-shadow:var(--shadow);border:2px solid var(--ring)}
    h1{margin:0 0 18px;font-size:clamp(28px,3.2vw,42px)}
    p{margin:0 0 16px;color:var(--muted);font-size:clamp(16px,1.4vw,18px);line-height:1.85}
    form{display:grid;gap:14px;margin-top:12px}
    label{font-weight:700}
    input,textarea{width:100%;padding:14px 16px;border:2px solid var(--border);border-radius:14px;font-size:16px}
    input:focus,textarea:focus{border-color:#bcd3ff;box-shadow:0 0 0 4px rgba(110,168,255,.18);outline:none}
    textarea{min-height:140px;resize:vertical}
    .btn{padding:14px 22px;border-radius:999px;border:none;cursor:pointer;
         background:linear-gradient(90deg,#22c55e,#16a34a);color:#fff;font-weight:800}


/* 1) Partner button: rectangular, centered, 80% width (desktop & mobile) */
.results-panel .grid .result-card-item.dps-card .dps-cta{
  display:block !important;
  width:80% !important;
  margin:20px auto 4px !important;
  text-align:center !important;
  border-radius:14px !important; /* rectangular (not pill) */
  padding:16px 24px !important;
}

/* 2) Not-found helper line spacing */
.results-panel .grid .result-card-item.dps-card .dps-helper{
  display:block;
  margin:0 0 18px 0;
  padding:0 2px;
  line-height:1.6;
}

/* 3) Card inner padding (gives breathing room on all cards) */
.results-panel .grid .result-card-item.dps-card{
  padding:24px 20px !important;
}

/* 4) Extra space between note and grid (optional) */
.results-panel{ margin-top:22px; }      

/* ==== UI Polish Patch ==== */

/* Guidance card: thin black border so text + button look one box */
.result-card-item.dps-card.guidance{
  border:1px solid #111 !important;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.04);
}

/* Primary "Search Profiles" button → pink */
#searchBtn{
  background:linear-gradient(180deg,#ff6ea8,#ff3e7f) !important;
  border:1px solid rgba(0,0,0,.15);
  color:#fff;
}
#searchBtn:hover{ filter:brightness(1.03); }
#searchBtn:disabled{ opacity:.8; cursor:not-allowed; }

/* Spinner inside the button when loading */
#searchBtn.loading{
  position:relative;
  color:#fff;
}
#searchBtn.loading::after{
  content:"";
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff; animation:spin .8s linear infinite;
}

/* Global progress row spinner (if present) */
.spinner{ width:18px; height:18px; border-radius:50%; border:3px solid #e5e7eb; border-top-color:#3b82f6; animation:spin 1s linear infinite; }
.progress-row[aria-busy="true"]{ opacity:1 }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==== DPS Full-Width Overrides (2025-09-16) ==== */

/* Make hero card and inner grid full width */
.hero .wrap { max-width:100%; padding-left:10px; padding-right:10px; }
.hero .search-card { max-width:none; }
.results-panel .grid { max-width:100%; }

/* Search form: allow full-width row on desktop and column on mobile */
.search { max-width:none; width:100%; }
.search input { width:100%; }
.search button { min-width:200px; } /* keep readable on desktop */

/* Partner CTA: always single-line, full width, no side margins */
.results-panel .grid .result-card-item.dps-card .dps-cta{
  display:block !important;
  width:100% !important;
  margin:12px 0 0 !important;
  text-align:center !important;
  border-radius:12px !important;
  padding:16px 18px !important;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 10px 0 #0b5d24 !important; /* keep 3D style tighter */
}

/* Also enforce for found-profile card generated by app.js */
.dps-cta{ 
  display:block !important;
  width:100% !important;
  margin:12px 0 0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
  border-radius:12px !important;
  padding:16px 18px !important;
}

/* Reset desktop wrap width (remove forced 100%) */
.wrap { max-width: 1100px; padding-left:20px; padding-right:20px; }
.search-card { padding-left:16px; padding-right:16px; }

/* ==== DPS Button Fix (2025-09-16b) ==== */

/* Found result CTA: ensure full text visible, icon + text on one line */
.result-card-item .dps-cta{
  white-space:normal !important;
  text-overflow:initial !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-size:16px !important;
  line-height:1.4 !important;
}

/* ==== DPS Patch: prevent CTA truncation on found-result cards (2025-09-16) ==== */
@media (max-width: 480px){
  .dps-cta{
    font-size:16px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    letter-spacing:0 !important;
  }
}
@media (max-width: 360px){
  .dps-cta{
    font-size:15px !important;
  }
}


/* ==== DPS Mobile CTA Single-Line Fix (2025-09-16c) ==== */
@media (max-width: 768px){
  .result-card-item .dps-cta{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;      /* force one line */
    overflow:hidden !important;
    text-overflow:clip !important;      /* no ellipsis */
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    font-size:18px !important;          /* readable but fits */
    line-height:1.2 !important;
    padding:14px 16px !important;       /* a bit tighter on mobile */
  }
}
@media (max-width: 360px){
  .result-card-item .dps-cta{
    font-size:16px !important;
    padding:12px 12px !important;
  }
}

/* ==== DPS Definitive Width Rules (2025-09-16d) ==== */
/* Desktop & tablet — centered, constrained */
.hero > .wrap { max-width:1080px !important; padding-left:20px !important; padding-right:20px !important; margin:0 auto !important; }
.hero .search-card { max-width:940px !important; margin:0 auto !important; }
.results-panel .grid { max-width:860px !important; margin:0 auto !important; }
.search { max-width:760px !important; width:auto !important; margin:0 auto !important; }

/* Mobile — full width */
@media (max-width: 768px){
  .hero > .wrap { max-width:100% !important; padding-left:10px !important; padding-right:10px !important; }
  .hero .search-card { max-width:none !important; }
  .results-panel .grid { max-width:100% !important; }
  .search { max-width:none !important; width:100% !important; }
}

/* Mobile CTA must be visible & single-line full-width */
@media (max-width: 768px){
  .result-card-item .dps-cta{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:18px !important;
    line-height:1.25 !important;
    padding:14px 18px !important;
  }
}
@media (max-width: 360px){
  .result-card-item .dps-cta{ font-size:16px !important; padding:12px 14px !important; }
}

/* ==== DPS Ultimate Mobile Found CTA Fix (2025-09-16g) ==== */
/* Ensure the found-profile CTA text is never clipped on ~375px iPhones. */
@media (max-width: 768px){
  .results-panel .grid .result-card-item.dps-card:not(.guidance) .dps-body > .dps-cta,
  .results-panel .grid .result-card-item.dps-card:not(.guidance) .dps-cta{
    display:block !important;
    width:100% !important;
    white-space:normal !important;     /* allow wrapping */
    overflow:visible !important;       /* unclip */
    text-overflow:initial !important;  /* no ellipsis */
    line-height:1.28 !important;
    padding:14px 16px !important;
    align-self:stretch !important;
    word-break:normal !important;
  }
}
@media (max-width: 390px){
  .results-panel .grid .result-card-item.dps-card:not(.guidance) .dps-body > .dps-cta,
  .results-panel .grid .result-card-item.dps-card:not(.guidance) .dps-cta{
    font-size:16px !important;
    padding:12px 12px !important;
  }
}


/* Removed burger/mobile menu */
.burger, #mnav { display: none !important; }