@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --bg:#000000;
  --surface:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.12);
  --text:#ffffff;
  --muted:rgba(255,255,255,0.45);
  --p0:#79c0ff;
  --p1:#3fb950;
  --p2:#d29922;
  --p3:#db6d28;
  --p4:#bc8cff;
  --p5:#f778ba;
}

body{
  background:#000;
  color:#fff;
  font-family:'Space Mono',monospace;
  cursor:crosshair;
  overflow-x:hidden;
}

/* ── Grid overlay ── */
body::after{
  content:'';
  position:fixed;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size:80px 80px;
  z-index:-1;pointer-events:none;opacity:.5;
}

/* ── Scanline ── */
body::before{
  content:'';
  position:fixed;left:0;width:100%;height:3px;
  background:rgba(255,255,255,0.08);
  z-index:9999;pointer-events:none;
  animation:scanline 8s linear infinite;
}
@keyframes scanline{0%{top:-3px;}100%{top:100vh;}}

/* ════════════════ NAV ════════════════ */
.back-nav{position:fixed;top:1.5rem;left:2.5rem;z-index:100;}
.back-nav a{
  color:#fff;text-decoration:none;
  font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;opacity:.45;
  transition:opacity .3s,letter-spacing .3s,text-shadow .3s;
}
.back-nav a:hover{opacity:1;letter-spacing:.4em;text-shadow:0 0 20px rgba(255,255,255,0.9);}

/* ════════════════ HERO ════════════════ */
.page-hero{
  text-align:center;padding:4rem 2rem 2rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.angel-wings{color:rgba(255,255,255,0.3);font-size:1.1rem;letter-spacing:14px;}
.page-title{
  font-family:'Syncopate',sans-serif;
  font-size:clamp(2rem,6vw,4.5rem);
  font-weight:700;letter-spacing:.15em;line-height:1.05;
  text-shadow:0 0 20px rgba(255,255,255,0.2);
}
.page-sub{font-size:.7rem;letter-spacing:.5em;opacity:0.95;text-transform:uppercase;color:#ffffff;font-weight:700;}

/* ════════════════ LAYOUT ════════════════ */
.content{width:85%;max-width:1100px;margin:0 auto;padding:0 0 8rem;}

/* ════════════════ TIMELINE PILLS ════════════════ */
.timeline{display:flex;gap:8px;margin-bottom:2.5rem;padding-bottom:4px;justify-content:center;flex-wrap:wrap;}
.phase-pill{
  flex-shrink:0;padding:10px 14px;
  font-size:.65rem;font-weight:700;letter-spacing:.12em;
  text-align:center;min-width:120px;
  border:1px solid;text-transform:uppercase;
}
.p0{border-color:rgba(121,192,255,.4);color:var(--p0);background:rgba(121,192,255,.05);}
.p1{border-color:rgba(63,185,80,.4);color:var(--p1);background:rgba(63,185,80,.05);}
.p2{border-color:rgba(210,153,34,.4);color:var(--p2);background:rgba(210,153,34,.05);}
.p3{border-color:rgba(219,109,40,.4);color:var(--p3);background:rgba(219,109,40,.05);}
.p4{border-color:rgba(188,140,255,.4);color:var(--p4);background:rgba(188,140,255,.05);}
.p5{border-color:rgba(247,120,186,.4);color:var(--p5);background:rgba(247,120,186,.05);}
.phase-pill .duration{font-size:.58rem;opacity:.6;margin-top:3px;font-weight:400;}

/* ════════════════ SUMMARY CARDS ════════════════ */
.summary-grid-wrapper{display:flex;justify-content:center;margin-bottom:2rem;}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:600px;}
.summary-card{
  border:1px solid var(--border);padding:12px;text-align:center;
  background:var(--surface);
  display:flex;flex-direction:column;gap:0.5rem;
}
.summary-title{
  font-size:.7rem;letter-spacing:.12em;color:#ffffff;
  text-transform:uppercase;font-weight:700;opacity:0.95;
}
.summary-card .num{font-size:1.8rem;font-weight:700;}
.summary-card .lbl{font-size:.58rem;letter-spacing:.15em;opacity:.45;margin-top:2px;text-transform:uppercase;line-height:1.3;}
.issues-resolved{color:#2ea043;font-weight:700;}
.issues-pending{color:#f85149;font-weight:700;}
.num-api{color:#f0883e;}
.num-web{color:var(--p0);}
.num-wpf{color:var(--p4);}
.num-and{color:var(--p1);}
.num-tot{color:#fff;}

/* ════════════════ DEVELOPERS GRID ════════════════ */
.developers-section{margin-bottom:2.5rem;}
.developers-section>h2{font-family:'Syncopate',sans-serif;font-size:.8rem;letter-spacing:.25em;color:rgba(255,255,255,.7);margin-bottom:1.5rem;text-transform:uppercase;}
.developers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem;align-items:center;}
.dev-card{
  border:1px solid var(--border);padding:1.5rem;
  background:var(--surface);
  display:flex;flex-direction:column;
  transition:all .3s ease;
  position:relative;
}
.dev-role-badge{
  position:absolute;top:8px;right:8px;
  font-size:.5rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
  font-weight:700;white-space:nowrap;
}
.badge-icon{
  font-size:.6rem;margin-left:2px;
}
.dev-card:hover{
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.04);
  transform:translateY(-2px);
}
.dev-avatar-container{
  display:flex;align-items:center;justify-content:center;margin-bottom:.8rem;margin-top:.3rem;
}
.dev-avatar-img{
  width:80px;height:80px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
  object-fit:cover;
}
.dev-name{
  font-family:'Syncopate',sans-serif;
  font-size:.8rem;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:.3rem;
  color:#fff;
}
.dev-role{
  font-size:.65rem;color:var(--muted);
  margin-bottom:1rem;line-height:1.4;
}
.dev-stats-mini{
  display:flex;justify-content:space-around;
  padding:1rem 0;border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  margin:1rem 0;
}
.dev-stat-mini{text-align:center;}
.dev-stat-num-mini{
  font-size:1.2rem;font-weight:700;
  color:var(--p1);
}
/* ════════════════ MINI COLLABORATE CARD ════════════════ */
.dev-card-mini {
  width: 110px;
  height: 110px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.dev-card-mini:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  transform: scale(1.08);
}

.collab-invite.dev-card-mini {
  border-style: dashed;
}

.mini-plus {
  font-size: 2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  transition: color 0.3s;
}

.dev-card-mini:hover .mini-plus {
  color: rgba(255,255,255,0.9);
}

.mini-text {
  font-size: 0.5rem;
  text-align: center;
  color: rgba(255,255,255,0.5);
  line-height: 1.1;
  transition: color 0.3s;
}

.dev-card-mini:hover .mini-text {
  color: rgba(255,255,255,0.8);
}
.dev-card:nth-child(1) .dev-stat-num-mini { color: #f0883e; }
.dev-card:nth-child(2) .dev-stat-num-mini { color: #58a6ff; }

/* ── Colaboradores ── */
.dev-collab{opacity:.7;}
.dev-avatar-placeholder{
  width:80px;height:80px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;background:rgba(255,255,255,.05);
}
.dev-stat-label-mini{
  font-size:.55rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);
  margin-top:.2rem;
}
.dev-view-btn{
  align-self:center;
  background:transparent;border:1px solid rgba(255,255,255,.2);
  color:#fff;font-family:'Syncopate',sans-serif;
  font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;padding:.7rem 1.2rem;
  cursor:crosshair;transition:all .3s;
  margin-top:auto;
}
.dev-view-btn:hover{
  border-color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 15px rgba(255,255,255,.1);
}

/* ════════════════ DB SECTION ════════════════ */
.db-section{border:1px solid var(--border);padding:1.5rem;margin-bottom:1.5rem;background:var(--surface);}
.db-section h2{font-family:'Syncopate',sans-serif;font-size:.8rem;letter-spacing:.25em;color:rgba(255,255,255,.7);margin-bottom:1rem;text-transform:uppercase;}
.db-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;}
.db-card{
  border:1px solid var(--border);padding:8px 12px;
  font-size:.72rem;background:rgba(255,255,255,.02);
}
.db-card .coll-name{color:var(--p0);font-weight:700;letter-spacing:.1em;}
.db-card .coll-desc{color:var(--muted);font-size:.62rem;margin-top:2px;}
.db-card.new-coll{border-color:rgba(63,185,80,.4);}
.db-card.new-coll .coll-name{color:var(--p1);}

.fields-table{width:100%;border-collapse:collapse;font-size:.72rem;margin-top:1rem;}
.fields-table th{background:rgba(255,255,255,.05);color:var(--muted);text-align:left;padding:7px 10px;border:1px solid var(--border);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;}
.fields-table td{padding:6px 10px;border:1px solid rgba(255,255,255,.06);vertical-align:top;}
.fields-table tr:nth-child(even) td{background:rgba(255,255,255,.02);}

code{
  font-family:'Space Mono',monospace;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  padding:1px 5px;font-size:.7rem;color:#79c0ff;
}

/* ════════════════ PHASE BLOCKS ════════════════ */
.phase{margin-bottom:1.5rem;border:1px solid var(--border);overflow:hidden;}
.phase-header{
  padding:12px 18px;font-family:'Syncopate',sans-serif;
  font-size:.8rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.ph0{background:rgba(121,192,255,.08);color:var(--p0);border-bottom:1px solid rgba(121,192,255,.2);}
.ph1{background:rgba(63,185,80,.08);color:var(--p1);border-bottom:1px solid rgba(63,185,80,.2);}
.ph2{background:rgba(210,153,34,.08);color:var(--p2);border-bottom:1px solid rgba(210,153,34,.2);}
.ph3{background:rgba(219,109,40,.08);color:var(--p3);border-bottom:1px solid rgba(219,109,40,.2);}
.ph4{background:rgba(188,140,255,.08);color:var(--p4);border-bottom:1px solid rgba(188,140,255,.2);}
.ph5{background:rgba(247,120,186,.08);color:var(--p5);border-bottom:1px solid rgba(247,120,186,.2);}
.phase-content{padding:1rem 1.2rem 1.2rem;}

.sub-header{
  font-size:.65rem;letter-spacing:.25em;color:var(--muted);
  margin:1rem 0 .4rem;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.sub-header::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08);}

/* ════════════════ ISSUE TABLE ════════════════ */
.issue-table{width:100%;border-collapse:collapse;font-size:.72rem;}
.issue-table th{padding:7px 8px;text-align:left;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.08);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;}
.issue-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;}
.issue-table tr:last-child td{border-bottom:none;}
.issue-num{color:var(--muted);font-size:.68rem;min-width:30px;}
.issue-title{color:rgba(255,255,255,.8);}
.issue-repo{font-size:.65rem;white-space:nowrap;}
.repo-api{color:#f0883e;}
.repo-web{color:var(--p0);}
.repo-wpf{color:var(--p4);}
.repo-android{color:var(--p1);}
.issue-coll{font-size:.62rem;color:#79c0ff;}

/* ── Resolved row ── */
.row-resolved td{opacity:.55;}
.row-resolved .issue-num::before{content:'✓ ';color:#2ea043;font-weight:700;}

/* ════════════════ LABELS ════════════════ */
.label{display:inline-block;font-size:.6rem;font-weight:700;padding:1px 6px;margin:1px;border:1px solid;letter-spacing:.08em;}
.l-refactor{color:#a8d672;border-color:rgba(168,214,114,.3);background:rgba(168,214,114,.06);}
.l-arch{color:#72b8d6;border-color:rgba(114,184,214,.3);background:rgba(114,184,214,.06);}
.l-auth{color:#d6b872;border-color:rgba(214,184,114,.3);background:rgba(214,184,114,.06);}
.l-security{color:#d67272;border-color:rgba(214,114,114,.3);background:rgba(214,114,114,.06);}
.l-devops{color:#b872d6;border-color:rgba(184,114,214,.3);background:rgba(184,114,214,.06);}
.l-matchmaking{color:#72a8d6;border-color:rgba(114,168,214,.3);background:rgba(114,168,214,.06);}
.l-chat{color:#d6c872;border-color:rgba(214,200,114,.3);background:rgba(214,200,114,.06);}
.l-tournaments{color:#d672c8;border-color:rgba(214,114,200,.3);background:rgba(214,114,200,.06);}
.l-admin{color:#d67272;border-color:rgba(214,114,114,.3);background:rgba(214,114,114,.06);}
.l-friends{color:#72d672;border-color:rgba(114,214,114,.3);background:rgba(114,214,114,.06);}
.l-profile{color:#72b8d6;border-color:rgba(114,184,214,.3);background:rgba(114,184,214,.06);}
.l-social{color:#d672a8;border-color:rgba(214,114,168,.3);background:rgba(214,114,168,.06);}
.l-payments{color:#d6a872;border-color:rgba(214,168,114,.3);background:rgba(214,168,114,.06);}
.l-achieve{color:#d6c860;border-color:rgba(214,200,96,.3);background:rgba(214,200,96,.06);}
.l-ui{color:#7288d6;border-color:rgba(114,136,214,.3);background:rgba(114,136,214,.06);}
.l-bug{color:#f85149;border-color:rgba(248,81,73,.3);background:rgba(248,81,73,.06);}
.l-pro{color:#bc8cff;border-color:rgba(188,140,255,.3);background:rgba(188,140,255,.06);}
.l-overlay{color:#8892d6;border-color:rgba(136,146,214,.3);background:rgba(136,146,214,.06);}
.l-pwa{color:#60d0d0;border-color:rgba(96,208,208,.3);background:rgba(96,208,208,.06);}
.l-testing{color:#aaa;border-color:rgba(170,170,170,.3);background:rgba(170,170,170,.06);}
.l-docs{color:#90c090;border-color:rgba(144,192,144,.3);background:rgba(144,192,144,.06);}
/* Extra labels for Codexear */
.l-feat{color:#72b8d6;border-color:rgba(114,184,214,.3);background:rgba(114,184,214,.06);}
.l-exercise{color:#d6a872;border-color:rgba(214,168,114,.3);background:rgba(214,168,114,.06);}
.l-match{color:#72a8d6;border-color:rgba(114,168,214,.3);background:rgba(114,168,214,.06);}
.l-perf{color:#a8d672;border-color:rgba(168,214,114,.3);background:rgba(168,214,114,.06);}
.l-ws{color:#60d0d0;border-color:rgba(96,208,208,.3);background:rgba(96,208,208,.06);}
.l-store{color:#d6c860;border-color:rgba(214,200,96,.3);background:rgba(214,200,96,.06);}
.l-responsive{color:#7288d6;border-color:rgba(114,136,214,.3);background:rgba(114,136,214,.06);}

/* ════════════════ TECH BOX ════════════════ */
.tech-box{border:1px solid rgba(63,185,80,.2);padding:1rem 1.2rem;margin-bottom:.8rem;background:rgba(63,185,80,.03);}
.tech-box h4{color:var(--p1);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.6rem;}
pre{font-family:'Space Mono',monospace;font-size:.68rem;color:rgba(168,213,168,.8);overflow-x:auto;line-height:1.7;}

/* ════════════════ WEEKLY LOG ════════════════ */
.weekly-log{margin-top:3rem;}
.weekly-log>h2{font-family:'Syncopate',sans-serif;font-size:1rem;letter-spacing:.25em;text-transform:uppercase;margin-bottom:.4rem;}
.log-subtitle{font-size:.68rem;opacity:.4;margin-bottom:1.5rem;letter-spacing:.1em;}

.week-entry{
  border:1px solid var(--border);border-left:3px solid var(--p0);
  padding:1.2rem 1.5rem;margin-bottom:1rem;
  background:var(--surface);
}
.week-entry:hover{border-left-color:#fff;}
.week-header{display:flex;align-items:center;gap:10px;margin-bottom:1rem;flex-wrap:wrap;}
.week-num{font-size:.65rem;font-weight:700;background:rgba(121,192,255,.1);color:var(--p0);border:1px solid rgba(121,192,255,.3);padding:2px 10px;letter-spacing:.15em;}
.week-date{color:var(--muted);font-size:.65rem;}
.week-phase-tag{font-size:.6rem;font-weight:700;padding:2px 8px;border:1px solid;}
.tag-f0{color:var(--p0);border-color:rgba(121,192,255,.3);}
.tag-f1{color:var(--p1);border-color:rgba(63,185,80,.3);}
.tag-f2{color:var(--p2);border-color:rgba(210,153,34,.3);}
.tag-f3{color:var(--p3);border-color:rgba(219,109,40,.3);}
.tag-f4{color:var(--p4);border-color:rgba(188,140,255,.3);}
.tag-f5{color:var(--p5);border-color:rgba(247,120,186,.3);}

.week-done,.week-next{margin-bottom:.8rem;}
.week-done h4,.week-next h4{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem;}
.week-done h4{color:var(--p1);}
.week-next h4{color:var(--p2);}
.week-done ul,.week-next ul{list-style:none;display:flex;flex-direction:column;gap:3px;}
.week-done li::before{content:'✓ ';color:var(--p1);font-weight:700;}
.week-next li::before{content:'→ ';color:var(--p2);}
.week-done li,.week-next li{font-size:.72rem;opacity:.8;}

/* ════════════════ FOOTER ════════════════ */
.page-footer{
  text-align:center;padding:2rem;font-size:.65rem;
  letter-spacing:.3em;opacity:.35;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
}

/* ════════════════ ENTRY REVEAL ════════════════ */
.entry{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.entry.visible{opacity:1;transform:translateY(0);}

/* ════════════════ RESPONSIVE ════════════════ */
@media(max-width:768px){
  .back-nav{position:static;padding:1rem 1.2rem;}
  .content{width:94%;}
  .summary-grid{grid-template-columns:repeat(2,1fr);}
  .timeline{gap:5px;}
}