:root{
  --bg-void:#0b0e13;
  --bg-panel:#12161d;
  --bg-elevated:#1a212b;
  --border-color:#262d38;
  --text-primary:#e7ecf3;
  --text-muted:#8b95a5;
  --text-faint:#5c6472;
  --accent:#ff5a3c;
  --accent-soft:rgba(255,90,60,.13);
  --accent-2:#8a94d6;
  --accent-2-soft:rgba(138,148,214,.14);
  --green:#3fbf72;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-sans:'Inter', system-ui, sans-serif;
}

*{scrollbar-width:thin; scrollbar-color: var(--border-color) transparent;}

html,body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-sans);
  min-height:100vh;
}

a{color:var(--accent-2); text-decoration:none;}
a:hover{color:var(--accent);}

::selection{background:var(--accent-soft); color:var(--text-primary);}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Shell layout ---------- */
.ide-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Sidebar (file explorer) ---------- */
.ide-sidebar{
  width:300px;
  flex-shrink:0;
  background:var(--bg-panel);
  border-right:1px solid var(--border-color);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}

.sidebar-profile{
  padding:2rem 1.5rem 1.25rem;
  text-align:center;
  border-bottom:1px solid var(--border-color);
}

.avatar-frame{
  width:104px; height:104px;
  border-radius:14px;
  overflow:hidden;
  margin:0 auto 1rem;
  border:2px solid var(--border-color);
  position:relative;
}
.avatar-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar-frame::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,90,60,.25);
}

.sidebar-profile h1{
  font-family:var(--font-mono);
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:.15rem;
  letter-spacing:-.02em;
}
.sidebar-profile h1 .surname{color:var(--accent);}

.role-line{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text-muted);
  margin-bottom:1rem;
}
.role-line .caret{color:var(--accent); animation:blink 1.1s step-end infinite;}

.sidebar-socials{
  display:flex; justify-content:center; gap:.5rem;
}
.sidebar-socials a{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated);
  border:1px solid var(--border-color);
  border-radius:8px;
  color:var(--text-muted);
  transition:.15s;
}
.sidebar-socials a:hover{
  color:var(--accent);
  border-color:var(--accent);
  transform:translateY(-2px);
}

/* file explorer nav */
.explorer{
  padding:1.25rem 1rem;
  flex:1;
}
.explorer-label{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:0 .5rem .6rem;
}
.file-btn{
  width:100%;
  display:flex; align-items:center; gap:.6rem;
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:.85rem;
  padding:.55rem .6rem;
  text-align:left;
  margin-bottom:.15rem;
  cursor:pointer;
  transition:.12s;
}
.file-btn i{font-size:1rem; flex-shrink:0;}
.file-btn .fname{flex:1;}
.file-btn:hover{background:var(--bg-elevated); color:var(--text-primary);}
.file-btn.active{
  background:var(--accent-soft);
  color:var(--text-primary);
  border-color:rgba(255,90,60,.3);
}
.file-btn.active i{color:var(--accent);}
.file-btn .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--text-faint);
  display:none;
}
.file-btn.active .dot{display:block; background:var(--accent);}

.sidebar-status{
  border-top:1px solid var(--border-color);
  padding:.85rem 1.25rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.status-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(63,191,114,.15);
  flex-shrink:0;
}

/* ---------- Main editor area ---------- */
.ide-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.tab-bar{
  display:flex;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border-color);
  overflow-x:auto;
  position:sticky;
  top:0;
  z-index:10;
}
.tab-btn{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--text-muted);
  background:transparent;
  border:none;
  border-right:1px solid var(--border-color);
  padding:.85rem 1.3rem;
  white-space:nowrap;
  display:flex; align-items:center; gap:.5rem;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:.12s;
}
.tab-btn i{font-size:.95rem;}
.tab-btn:hover{color:var(--text-primary); background:var(--bg-elevated);}
.tab-btn.active{
  color:var(--text-primary);
  background:var(--bg-void);
  border-bottom:2px solid var(--accent);
}

.editor-panel{
  flex:1;
  padding:3rem clamp(1.25rem, 4vw, 4rem);
  max-width:980px;
  animation:fadeIn .25s ease;
}
.editor-panel.d-none{display:none !important;}

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@keyframes blink{ 50%{opacity:0;} }

/* code-comment style labels */
.code-line{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text-faint);
  display:flex;
  gap:.75rem;
  margin-bottom:.5rem;
}
.code-line .ln{color:var(--text-faint); min-width:1.4rem;}
.code-comment{color:var(--text-faint);}
.code-kw{color:var(--accent-2);}
.code-str{color:var(--green);}

.section-eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--accent);
  letter-spacing:.04em;
  margin-bottom:.6rem;
}

/* Hero */
.hero-name{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(2rem, 4.2vw, 3.4rem);
  line-height:1.08;
  letter-spacing:-.02em;
  margin-bottom:1rem;
}
.hero-name .accent{color:var(--accent);}
.hero-lede{
  font-size:1.05rem;
  color:var(--text-muted);
  max-width:56ch;
  margin-bottom:2rem;
  line-height:1.65;
}

.terminal{
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:10px;
  overflow:hidden;
  max-width:640px;
  margin-bottom:2.25rem;
}
.terminal-head{
  display:flex; align-items:center; gap:.4rem;
  padding:.6rem .85rem;
  border-bottom:1px solid var(--border-color);
  background:var(--bg-elevated);
}
.terminal-head span{width:10px; height:10px; border-radius:50%;}
.terminal-head span:nth-child(1){background:#ff5f57;}
.terminal-head span:nth-child(2){background:#febc2e;}
.terminal-head span:nth-child(3){background:#28c840;}
.terminal-title{
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint);
  margin-left:.5rem;
}
.terminal-body{
  padding:1.1rem 1.25rem 1.3rem;
  font-family:var(--font-mono);
  font-size:.85rem;
  line-height:1.85;
}
.terminal-body .prompt{color:var(--green);}
.terminal-body .out{color:var(--text-muted); display:block; padding-left:1.2rem;}
.terminal-body .out strong{color:var(--text-primary); font-weight:600;}

.btn-code{
  font-family:var(--font-mono);
  font-size:.85rem;
  padding:.65rem 1.3rem;
  border-radius:8px;
  border:1px solid var(--border-color);
  transition:.15s;
}
.btn-code-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#12161d;
  font-weight:600;
}
.btn-code-primary:hover{background:#ff714f; color:#12161d;}
.btn-code-ghost{
  background:transparent;
  color:var(--text-primary);
}
.btn-code-ghost:hover{border-color:var(--accent-2); color:var(--accent-2);}

.stat-row{
  display:flex; gap:2.2rem; flex-wrap:wrap;
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid var(--border-color);
}
.stat-row .num{
  font-family:var(--font-mono); font-weight:700; font-size:1.6rem; color:var(--text-primary);
}
.stat-row .lbl{font-size:.78rem; color:var(--text-muted);}

/* About */
.about-text p{color:var(--text-muted); line-height:1.85; max-width:66ch;}
.badge-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem;}
.chip{
  font-family:var(--font-mono); font-size:.75rem;
  border:1px solid var(--border-color);
  background:var(--bg-panel);
  color:var(--text-muted);
  padding:.35rem .75rem;
  border-radius:20px;
}
.info-grid{
  margin-top:2.25rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1px;
  background:var(--border-color);
  border:1px solid var(--border-color);
  border-radius:10px;
  overflow:hidden;
}
.info-cell{
  background:var(--bg-panel);
  padding:1rem 1.25rem;
}
.info-cell .k{font-family:var(--font-mono); font-size:.7rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em;}
.info-cell .v{font-weight:600; margin-top:.2rem;}

/* Timeline (resume.json) */
.json-brace{font-family:var(--font-mono); color:var(--text-faint); font-size:.85rem;}
.timeline{
  position:relative;
  padding-left:1.75rem;
  margin-top:1.5rem;
}
.timeline::before{
  content:"";
  position:absolute; left:5px; top:6px; bottom:6px;
  width:1px;
  background:var(--border-color);
}
.timeline-item{
  position:relative;
  padding-bottom:2rem;
}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";
  position:absolute; left:-1.75rem; top:.3rem;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg-void);
  border:2px solid var(--accent);
}
.timeline-item .role{font-weight:700; font-size:1.02rem;}
.timeline-item .org{
  font-family:var(--font-mono); font-size:.8rem; color:var(--accent-2); margin-top:.15rem;
}
.timeline-item .period{
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); margin-bottom:.5rem;
}
.timeline-item p{color:var(--text-muted); font-size:.92rem; line-height:1.7; margin-bottom:0; max-width:62ch;}

.subhead{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:2.75rem 0 .25rem;
}
.subhead:first-of-type{margin-top:0;}

/* Skills */
.skill-group{margin-bottom:2rem;}
.skill-group h3{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--accent-2);
  margin-bottom:.9rem;
}
.skill-tags{display:flex; flex-wrap:wrap; gap:.55rem;}
.skill-tag{
  font-family:var(--font-mono);
  font-size:.8rem;
  padding:.45rem .85rem;
  border-radius:7px;
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  color:var(--text-primary);
  transition:.15s;
}
.skill-tag:hover{border-color:var(--accent); color:var(--accent);}

.lang-row{display:flex; gap:2rem; margin-top:.5rem; flex-wrap:wrap;}
.lang-item .name{font-weight:600;}
.lang-item .level{font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted);}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1rem;
  margin-top:2rem;
}
.contact-card{
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:10px;
  padding:1.3rem 1.4rem;
  display:flex; gap:1rem; align-items:flex-start;
  transition:.15s;
}
.contact-card:hover{border-color:var(--accent);}
.contact-card i{
  font-size:1.2rem; color:var(--accent);
  width:38px; height:38px; flex-shrink:0;
  background:var(--accent-soft);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.contact-card .k{font-family:var(--font-mono); font-size:.7rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em;}
.contact-card .v{font-weight:600; color:var(--text-primary); word-break:break-word;}
.contact-card a.v:hover{color:var(--accent);}

/* Tech cycler */
.role-line{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.15rem;
  min-height:1.2em;
}
#techCycle{
  color:var(--accent-2);
  transition:opacity .18s ease;
}
#techCycle.swap{opacity:0;}

/* Projects grid */
.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1rem;
  margin-top:1.75rem;
}
.project-card{
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:0 0 1.4rem;
  text-align:left;
  cursor:pointer;
  transition:.18s;
  color:var(--text-primary);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  overflow:hidden;
}
.project-card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.project-card .card-body{padding:0 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1;}
.project-thumb{
  height:140px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  color:var(--bg-void);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  overflow:hidden;
}
.project-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:.35s ease;
}
.project-card:hover .project-thumb img{transform:scale(1.06);}
.project-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,14,19,0) 40%, rgba(11,14,19,.75) 100%);
  pointer-events:none;
}
.project-thumb .thumb-icon{
  position:absolute; top:.65rem; left:.65rem;
  width:32px; height:32px;
  border-radius:8px;
  background:rgba(11,14,19,.55);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  color:var(--accent);
  z-index:2;
  border:1px solid rgba(255,255,255,.12);
}
.project-card h3{
  font-size:1rem;
  font-weight:700;
  margin:0;
}
.project-card .ptag{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--text-faint);
}
.project-card p{
  font-size:.85rem;
  color:var(--text-muted);
  margin:0;
  line-height:1.5;
}
.project-card .popen{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--accent-2);
  margin-top:auto;
  display:flex; align-items:center; gap:.35rem;
  transition:.15s;
}
.project-card:hover .popen{color:var(--accent); gap:.55rem;}

/* Offcanvas project detail */
.offcanvas.project-panel{
  width:min(430px, 92vw);
  background:var(--bg-panel);
  border-left:1px solid var(--border-color);
  color:var(--text-primary);
}
.project-panel .offcanvas-header{
  border-bottom:1px solid var(--border-color);
}
.project-panel .offcanvas-title{
  font-family:var(--font-mono);
  font-size:1rem;
}
.project-panel .btn-close{filter:invert(1) grayscale(1) brightness(1.6);}
.panel-tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--accent-2);
  margin-bottom:.4rem;
}
.panel-desc{
  color:var(--text-muted);
  font-size:.9rem;
  line-height:1.7;
  margin-bottom:1.5rem;
}
.panel-shots{
  display:flex;
  gap:.65rem;
  margin-bottom:1.75rem;
  overflow-x:auto;
  padding-bottom:.4rem;
  scroll-snap-type:x mandatory;
}
.panel-shots::-webkit-scrollbar{height:6px;}
.panel-shots::-webkit-scrollbar-thumb{background:var(--border-color); border-radius:3px;}
.panel-shots .shot{
  flex:0 0 auto;
  width:120px;
  aspect-ratio:9/18;
  border-radius:12px;
  background:var(--bg-elevated);
  border:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint);
  font-size:1.3rem;
  overflow:hidden;
  scroll-snap-align:start;
  cursor:zoom-in;
  transition:.15s;
}
.panel-shots .shot img{width:100%; height:100%; object-fit:cover; display:block;}
.panel-shots .shot:hover{border-color:var(--accent);}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(6,8,11,.9);
  display:none;
  align-items:center; justify-content:center;
  padding:2rem;
}
.lightbox.show{display:flex;}
.lightbox img{
  max-width:min(90vw, 480px);
  max-height:85vh;
  border-radius:14px;
  border:1px solid var(--border-color);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute; top:1.25rem; right:1.5rem;
  width:42px; height:42px;
  border-radius:50%;
  background:var(--bg-elevated);
  border:1px solid var(--border-color);
  color:var(--text-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}

.panel-actions{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.panel-actions a{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.65rem 1rem;
  border-radius:8px;
  font-family:var(--font-mono);
  font-size:.85rem;
  font-weight:600;
  border:1px solid var(--border-color);
  color:var(--text-primary);
  transition:.15s;
}
.panel-actions a i{font-size:1.05rem;}
.panel-actions a.store-android:hover{border-color:#3ddc84; color:#3ddc84;}
.panel-actions a.store-ios:hover{border-color:#e6e6e6; color:#fff;}
.panel-actions a.store-web{background:var(--accent); border-color:var(--accent); color:#12161d;}
.panel-actions a.store-web:hover{background:#ff714f;}

/* Floating WhatsApp button */
.whatsapp-float{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  width:58px; height:58px;
  border-radius:50%;
  background:#25D366;
  color:#0d1117;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:0 6px 20px rgba(37,211,102,.4);
  z-index:1500;
  transition:.15s;
}
.whatsapp-float:hover{
  transform:scale(1.08);
  color:#0d1117;
  box-shadow:0 8px 26px rgba(37,211,102,.55);
}
@media (max-width:900px){
  .whatsapp-float{right:1rem; bottom:1rem; width:52px; height:52px; font-size:1.4rem;}
}

/* Mobile */
.sidebar-toggle{
  display:none;
}
@media (max-width: 900px){
  .ide-sidebar{
    position:fixed;
    left:0; top:0; bottom:0;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .ide-sidebar.open{transform:translateX(0);}
  .mobile-bar{
    display:flex !important;
    align-items:center;
    gap:.75rem;
    padding:.85rem 1rem;
    background:var(--bg-panel);
    border-bottom:1px solid var(--border-color);
    position:sticky; top:0; z-index:20;
  }
  .sidebar-toggle{
    display:flex;
    align-items:center; justify-content:center;
    width:38px; height:38px;
    background:var(--bg-elevated);
    border:1px solid var(--border-color);
    border-radius:8px;
    color:var(--text-primary);
  }
  .mobile-bar .mname{font-family:var(--font-mono); font-weight:700; font-size:.9rem;}
  .scrim{
    display:none;
    position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999;
  }
  .scrim.show{display:block;}
  .editor-panel{padding:2rem 1.25rem;}
  .stat-row{gap:1.4rem;}
}
.mobile-bar{display:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- Page loader ---------- */
#pageLoader{
  position:fixed; inset:0; z-index:5000;
  background:var(--bg-void);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity .5s ease, visibility .5s ease;
}
#pageLoader::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,90,60,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,90,60,.05) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}
#pageLoader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader-inner{
  position:relative;
  text-align:center;
  padding:2rem;
}
.loader-eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text-faint);
  margin-bottom:1.1rem;
  letter-spacing:.04em;
}
.loader-eyebrow .ok{color:var(--green);}
.loader-name{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(1.6rem, 5vw, 2.9rem);
  letter-spacing:-.01em;
  color:var(--text-primary);
  min-height:1.3em;
  white-space:nowrap;
}
.loader-name .typed{
  background:linear-gradient(90deg, var(--text-primary), var(--accent) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.loader-name .cursor{
  display:inline-block;
  width:.09em;
  margin-left:2px;
  background:var(--accent);
  animation:blink 0.9s step-end infinite;
}
.loader-role{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--accent-2);
  margin-top:.75rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.loader-role.show{opacity:1; transform:translateY(0);}
.loader-bar-track{
  width:min(320px, 70vw);
  height:3px;
  background:var(--bg-elevated);
  border-radius:3px;
  margin:1.9rem auto 0;
  overflow:hidden;
  border:1px solid var(--border-color);
}
.loader-bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius:3px;
  transition:width .35s ease;
}
.loader-pct{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--text-faint);
  margin-top:.6rem;
}
@media (prefers-reduced-motion: reduce){
  #pageLoader{transition:none;}
  .loader-name .cursor{animation:none;}
}