/* gitrecon — fem.moe design language · soft, feminine, but restrained & serious */

:root{
  --bg1:  #ffeef7;
  --bg2:  #f5e8ff;
  --ink:  #d94a86;   /* headings / links / accents */
  --ink-deep:#b83a6f;
  --text: #5e2842;   /* body text */
  --muted:#a97e93;   /* secondary text */
  --soft: #e79ac4;   /* soft pink */
  --dot:  #ff5fa6;   /* bright accent */
  --line: #f2d4e6;   /* hairline border */
  --line-2:#efe0f5;
  --card: #fffdfe;   /* card surface */
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --shadow: 0 12px 34px -20px rgba(120,50,86,.45);
  --shadow-sm: 0 4px 16px -12px rgba(120,50,86,.5);
}

*{ margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Quicksand", sans-serif;
  background:linear-gradient(165deg, var(--bg1) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  color:var(--text);
  min-height:100dvh;
  padding:44px 20px 40px;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  letter-spacing:.005em;
}

.wrap{
  width:100%;
  max-width:640px;
  min-height:calc(100dvh - 84px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  opacity:0;
  animation:fade .8s .05s ease forwards;
}
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

a{ color:var(--ink); text-decoration:none; transition:opacity .2s ease; }
a:hover{ opacity:.68; }

/* ── header ─────────────────────────────────────────── */
.hd{ text-align:center; margin-bottom:34px; }
.paw{
  width:26px; height:auto; display:block; margin:0 auto 14px;
  color:var(--soft); animation:bob 5s ease-in-out infinite; transform-origin:center;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-3px) rotate(3deg);} }

.title{
  font-family:"Comfortaa", sans-serif;
  font-weight:600;
  font-size:clamp(1.9rem, 7vw, 2.5rem);
  line-height:1;
  color:var(--ink);
  letter-spacing:-.02em;
}
.title span{ color:var(--soft); }
.tagline{
  margin-top:.7rem;
  font-size:.9rem;
  font-weight:500;
  color:var(--muted);
}
.byline{
  display:inline-block;
  margin-top:.5rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  opacity:.9;
}

/* ── cards ──────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:20px 22px;
  margin-bottom:16px;
}

/* ── search ─────────────────────────────────────────── */
.field{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  padding:6px 6px 6px 16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field:focus-within{
  border-color:var(--soft);
  box-shadow:0 0 0 3px rgba(231,154,196,.16);
}
.field .at{ color:var(--soft); font-weight:700; font-size:1.05rem; font-family:var(--mono); }
.field input{
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--mono); font-size:1rem; font-weight:500;
  color:var(--text); min-width:0; letter-spacing:-.01em;
}
.field input::placeholder{ color:var(--soft); opacity:.75; }

button#scanBtn{
  font-family:"Quicksand", sans-serif;
  font-weight:700; font-size:.9rem; letter-spacing:.01em;
  color:#fff;
  background:var(--ink);
  border:none; border-radius:10px;
  padding:11px 22px; cursor:pointer; white-space:nowrap;
  transition:background .2s ease, transform .12s ease, opacity .2s ease;
}
button#scanBtn:hover{ background:var(--ink-deep); }
button#scanBtn:active{ transform:translateY(1px); }
button#scanBtn:disabled{ opacity:.5; cursor:progress; }

/* ── advanced ───────────────────────────────────────── */
.advanced-toggle{
  margin-top:14px;
  background:none; border:none; cursor:pointer;
  font-family:"Quicksand", sans-serif; font-weight:600; font-size:.82rem;
  color:var(--muted);
  display:flex; align-items:center; gap:7px;
  transition:color .2s ease;
}
.advanced-toggle:hover{ color:var(--ink); }
.advanced-toggle .chev{ transition:transform .2s ease; display:inline-block; color:var(--soft); }
.advanced-toggle[aria-expanded="true"] .chev{ transform:rotate(90deg); }

.advanced{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.key-label{ display:block; font-size:.8rem; font-weight:500; color:var(--muted); margin-bottom:9px; }
textarea#keys{
  width:100%; resize:vertical;
  font-family:var(--mono); font-size:.8rem;
  color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; outline:none;
}
textarea#keys:focus{ border-color:var(--soft); box-shadow:0 0 0 3px rgba(231,154,196,.14); }
.hint{ font-size:.73rem; color:var(--muted); opacity:.85; margin-top:7px; line-height:1.55; }

.opts{ display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:16px; align-items:center; }
.opt{ display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:500; color:var(--text); cursor:pointer; user-select:none; }
.opt input[type="checkbox"]{ accent-color:var(--dot); width:15px; height:15px; cursor:pointer; }
.opt.sel{ gap:8px; color:var(--muted); }
.opt select{
  font-family:var(--mono); font-size:.78rem; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:4px 8px; cursor:pointer; outline:none;
}

/* ── status ─────────────────────────────────────────── */
.status{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:15px 20px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.spinner{
  width:17px; height:17px; flex-shrink:0;
  border:2.5px solid var(--line); border-top-color:var(--dot);
  border-radius:50%; animation:spin .75s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.status-text{ font-weight:600; font-size:.86rem; color:var(--ink); }
.status.err .spinner{ display:none; }
.status.err .status-text{ color:var(--dot); }

/* ── results ────────────────────────────────────────── */
.results{ display:flex; flex-direction:column; gap:16px; }
.results[hidden]{ display:none; }

/* profile header card */
.profile-card{ display:flex; gap:16px; align-items:center; }
.profile-card .avatar{
  width:66px; height:66px; border-radius:50%; flex-shrink:0;
  border:2px solid #fff; box-shadow:var(--shadow-sm);
  object-fit:cover; background:var(--line);
}
.profile-main{ flex:1; min-width:0; }
.profile-main h2{
  font-family:"Comfortaa", sans-serif; font-weight:600; font-size:1.15rem; color:var(--text);
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; line-height:1.2;
}
.profile-main .handle{ font-family:var(--mono); font-weight:400; font-size:.82rem; color:var(--soft); }
.profile-main .bio{ font-size:.85rem; margin-top:5px; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.chip{
  font-size:.74rem; font-weight:500;
  background:var(--bg1); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:3px 9px;
  display:inline-flex; align-items:center; gap:5px;
}
.chip .k,.pill .k{ color:var(--muted); font-weight:400; }

/* small sub-caption under a section heading */
.sub{ font-size:.76rem; color:var(--muted); margin:-6px 0 12px; }

/* section headings — a small dot motif instead of emoji */
.card h3{
  font-family:"Comfortaa", sans-serif; font-weight:600; font-size:.82rem;
  color:var(--ink); text-transform:lowercase; letter-spacing:.01em;
  display:flex; align-items:center; gap:9px; margin-bottom:15px;
}
.card h3::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--soft); flex-shrink:0;
}
.card h3 .count{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  color:var(--ink); background:var(--bg1); border:1px solid var(--line);
  border-radius:6px; padding:1px 8px; margin-left:auto;
}

/* email rows */
.email-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; border-radius:10px; background:var(--bg1);
  margin-bottom:7px;
}
.email-row:last-child{ margin-bottom:0; }
.email-row .em{ font-family:var(--mono); font-weight:500; color:var(--text); flex:1; min-width:0; word-break:break-all; font-size:.85rem; }
.email-row .src{ font-family:var(--mono); font-size:.68rem; color:var(--muted); white-space:nowrap; opacity:.8; }
.email-row .copy{
  font-family:"Quicksand", sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:5px 11px; cursor:pointer; transition:all .15s ease;
}
.email-row .copy:hover{ border-color:var(--soft); }
.email-row .copy.done{ background:var(--dot); color:#fff; border-color:var(--dot); }
.none{ font-size:.83rem; color:var(--muted); }

/* generic pill lists (names, socials, orgs) */
.pill-list{ display:flex; flex-wrap:wrap; gap:7px; }
.pill{
  font-size:.8rem; font-weight:500; color:var(--text);
  background:var(--bg1); border:1px solid var(--line); border-radius:8px; padding:5px 11px;
  display:inline-flex; align-items:center; gap:7px;
}
.pill.mono{ font-family:var(--mono); font-size:.74rem; }
.pill .mini{ width:16px; height:16px; border-radius:50%; object-fit:cover; }
.pill .tally{ font-family:var(--mono); font-size:.66rem; color:var(--muted); }

/* repo list */
.repo{
  padding:12px 14px; border-radius:11px; background:var(--bg1); margin-bottom:7px;
}
.repo:last-child{ margin-bottom:0; }
.repo .rtop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.repo .rname{ font-family:var(--mono); font-weight:500; font-size:.85rem; color:var(--ink); }
.repo .rfork{ font-size:.62rem; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:.06em; }
.repo .rmeta{ margin-left:auto; display:flex; gap:12px; font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.repo .rdesc{ font-size:.78rem; margin-top:5px; color:var(--muted); }
.lang-dot{ width:8px; height:8px; border-radius:50%; background:var(--soft); display:inline-block; margin-right:5px; }

/* export bar */
.export{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.8rem; font-weight:500;
}
.export .lbl{ color:var(--muted); margin-right:auto; }
.export button{
  font-family:var(--mono); font-size:.75rem; font-weight:500; color:var(--ink);
  background:var(--bg1); border:1px solid var(--line); border-radius:8px;
  padding:6px 13px; cursor:pointer; transition:all .15s ease;
}
.export button:hover{ border-color:var(--soft); background:#fff; }

/* trail */
.trail{ font-family:var(--mono); font-size:.7rem; color:var(--muted); line-height:1.7; }
.trail summary{ cursor:pointer; font-family:"Quicksand", sans-serif; font-weight:600; font-size:.8rem; color:var(--ink); }
.trail div{ margin-top:5px; padding-left:2px; }

/* ── footer ─────────────────────────────────────────── */
.ft{ text-align:center; margin-top:auto; padding-top:34px; font-size:.78rem; color:var(--muted); }
.ft a{ font-weight:700; }

@media (max-width:520px){
  body{ padding:32px 14px 28px; }
  .field{ flex-wrap:wrap; }
  .field input{ width:100%; }
  button#scanBtn{ width:100%; }
  .profile-card{ flex-direction:column; text-align:center; }
  .profile-main h2{ justify-content:center; }
  .repo .rmeta{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .wrap,.paw,.spinner{ animation:none; }
}