:root{
    --bg:#121814; --bg-panel:#171F19; --bg-alt:#141C17;
    --border:#293A2F; --border-soft:#202D25;
    --green:#7CFC9A; --green-dim:#537063; --green-soft:#33422F;
    --white:#E9F5EC; --muted:#849283;
    --cyan:#5EEAD4; --titlebar-bg: rgba(18,24,20,0.92);
  }
  :root[data-theme="light"]{
    --bg:#F5F2E7; --bg-panel:#ECE7D6; --bg-alt:#F0EBDA;
    --border:#DAD3BC; --border-soft:#E2DCC5;
    --green:#1E7A4C; --green-dim:#5C7860; --green-soft:#CFE3D2;
    --white:#181712; --muted:#6B6555;
    --cyan:#0E7C77; --titlebar-bg: rgba(245,242,231,0.92);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }
  body{
    margin:0; background:var(--bg); color:var(--green);
    font-family:'IBM Plex Mono', monospace; font-size:15px; line-height:1.7;
    -webkit-font-smoothing:antialiased;
    transition: background-color .25s ease, color .25s ease;
  }
  body, .titlebar, .monitor, .exp-card, .cert-item, .cline, .listing tr, footer, .resfile, .btn-outline, .proj-card, .social-btn, .theme-toggle{
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--green); color:#04120A; }
  a:focus-visible, button:focus-visible{ outline:1px solid var(--green); outline-offset:3px; }
  .white{ color:var(--white); }
  .muted{ color:var(--muted); }
  .prompt{ color:var(--green); }
  .cyan{ color:var(--cyan); }

  /* ---------- titlebar ---------- */
  .titlebar{
    position:sticky; top:0; z-index:50;
    background:var(--titlebar-bg); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
    padding: 14px clamp(16px,4vw,48px);
    display:flex; align-items:center; gap:24px;
  }
  .dots{ display:flex; gap:7px; flex-shrink:0; }
  .dots span{ width:11px; height:11px; border-radius:50%; }
  .dots span:nth-child(1){ background:#FF5F57; }
  .dots span:nth-child(2){ background:#FEBC2E; }
  .dots span:nth-child(3){ background:#28C840; }
  .path{ color:var(--muted); font-size:0.82rem; white-space:nowrap; }
  .tabs{ display:flex; gap:2px; overflow-x:auto; flex:1; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{
    padding:7px 14px; font-size:0.82rem; color:var(--muted);
    border-bottom:2px solid transparent; white-space:nowrap;
    transition: color .15s ease, border-color .15s ease;
  }
  .tab:hover{ color:var(--white); }
  .tab.active{ color:var(--green); border-color:var(--green); }
  .resfile{
    display:flex; align-items:center; gap:8px;
    padding:7px 14px; border:1px solid var(--border);
    border-radius:3px; font-size:0.78rem; color:var(--white);
    white-space:nowrap; flex-shrink:0;
    transition: border-color .15s ease, background .15s ease;
  }
  .resfile:hover{ border-color:var(--green); background:rgba(124,252,154,0.06); }
  .mobile-menu-btn{ display:none; }
  .theme-toggle{
    display:flex; align-items:center; gap:8px;
    padding:7px 14px; border:1px solid var(--border);
    border-radius:3px; font-size:0.78rem; color:var(--white);
    white-space:nowrap; flex-shrink:0; background:none; cursor:pointer;
    font-family:'IBM Plex Mono', monospace;
    transition: border-color .15s ease, background .15s ease;
  }
  .theme-toggle:hover{ border-color:var(--green); background:rgba(124,252,154,0.06); }

  /* ---------- layout ---------- */
  main{ max-width:1400px; margin:0 auto; }
  section{ padding: 60px clamp(16px,4vw,48px); border-bottom:1px solid var(--border-soft); scroll-margin-top: 66px; }
  .comment{ color:var(--green-dim); font-size:0.85rem; margin-bottom:22px; }

  /* ---------- hero ---------- */
  .hero{ padding-top: clamp(40px,7vw,80px); border-bottom:1px solid var(--border-soft); }
  .hero-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:40px; }
  .term-line{ margin-bottom:6px; font-size:0.95rem; }
  .term-out{ color:var(--white); margin: 4px 0 18px; font-size:1.02rem; transition: opacity .4s ease; }
  .type-line{ display:inline-block; border-right:2px solid var(--green); }
  .type-line.blink{ animation: caretBlink .8s step-end infinite; }
  @keyframes caretBlink{ 50%{ border-color:transparent; } }
  .hero .lead{ color:var(--muted); max-width:60ch; margin-top:6px; opacity:0; transition: opacity .5s ease, transform .5s ease; transform: translateY(8px); }
  .hero .lead.show{ opacity:1; transform:translateY(0); }
  .hero .cta-row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; opacity:0; transition: opacity .5s ease, transform .5s ease; transform: translateY(8px); }
  .hero .cta-row.show{ opacity:1; transform:translateY(0); }
  @keyframes fadeIn{ to{ opacity:1; } }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:3px; font-size:0.85rem; cursor:pointer; }
  .btn-solid{ background:var(--green); color:#04120A; font-weight:600; transition: background .15s ease, transform .15s ease; }
  .btn-solid:hover{ background:#94FFB0; transform:translateY(-1px); }
  .btn-outline{ border:1px solid var(--border); color:var(--white); transition: border-color .15s ease, background .15s ease; }
  .btn-outline:hover{ border-color:var(--green); background:rgba(124,252,154,0.06); }

  .monitor{
    background:var(--bg-panel); border:1px solid var(--border); border-radius:6px;
    padding:18px 20px; font-size:0.82rem; opacity:0; animation: fadeIn .6s ease 1.4s forwards;
    height: fit-content;
  }
  .monitor .mtitle{ color:var(--muted); font-size:0.72rem; margin-bottom:14px; border-bottom:1px solid var(--border); padding-bottom:10px; }
  .monitor .row{ display:flex; justify-content:space-between; padding:7px 0; }
  .monitor .row .k{ color:var(--muted); }
  .monitor .row .v{ color:var(--white); }
  .uptime-box{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
  .uptime-box .k{ color:var(--muted); font-size:0.72rem; }
  .uptime-box .v{ color:var(--green); font-size:1.1rem; margin-top:4px; }

  /* ---------- experience tree ---------- */
  .tree{ padding-left: 4px; }
  .tnode{ position:relative; padding-left:28px; margin-bottom:8px; }
  .tnode::before{ content:'├──'; position:absolute; left:0; color:var(--green-dim); }
  .tnode.last::before{ content:'└──'; }
  .tnode .fname{ color:var(--white); }
  .exp-card{
    margin-left:28px; margin-top:10px; margin-bottom:30px;
    padding: 20px 22px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px;
  }
  .exp-card .role{ color:var(--white); font-size:1.05rem; font-weight:600; }
  .exp-card .meta{ color:var(--green-dim); font-size:0.78rem; margin-top:4px; }
  .exp-card ul{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:9px; }
  .exp-card li{ position:relative; padding-left:20px; color:var(--muted); font-size:0.92rem; }
  .exp-card li::before{ content:'>'; position:absolute; left:0; color:var(--green); }

  /* ---------- stack listing ---------- */
  .listing{ width:100%; border-collapse:collapse; font-size:0.86rem; }
  .listing tr{ border-bottom:1px solid var(--border-soft); }
  .listing td{ padding:12px 10px; vertical-align:top; }
  .listing .perm{ color:var(--green-dim); white-space:nowrap; }
  .listing .fname{ color:var(--white); white-space:nowrap; }
  .listing .items{ color:var(--muted); }
  .listing .items span{ color:var(--cyan); }
  .listing .items span:not(:last-child)::after{ content:', '; color:var(--muted); }

  /* ---------- projects ---------- */
  .proj-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
  .proj-card{
    display:block; padding:20px 20px 22px; background:var(--bg-panel);
    border:1px solid var(--border); border-radius:6px;
    transition: border-color .15s ease, transform .15s ease;
  }
  .proj-card:hover{ border-color:var(--green-dim); transform:translateY(-2px); }
  .proj-top{ display:flex; justify-content:space-between; align-items:center; }
  .proj-top .fname{ color:var(--white); font-size:0.98rem; }
  .proj-top .arrow{ color:var(--green-dim); font-size:0.95rem; transition: color .15s ease, transform .15s ease; }
  .proj-card:hover .arrow{ color:var(--green); transform:translate(2px,-2px); }
  .proj-desc{ color:var(--muted); font-size:0.85rem; margin:12px 0 14px; }
  .proj-card .items{ font-size:0.78rem; }

  /* ---------- socials ---------- */
  .social-row{ display:flex; gap:12px; margin: 18px 0 30px; }
  .social-btn{
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:6px; color:var(--white);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
  }
  .social-btn:hover{ border-color:var(--green); background:rgba(124,252,154,0.06); color:var(--green); }

  /* ---------- certifications ---------- */
  .cert-log{ display:flex; flex-direction:column; gap:2px; }
  .cert-item{
    display:grid; grid-template-columns: 90px 1fr auto; gap:16px; align-items:center;
    padding:16px 18px; background:var(--bg-panel); border:1px solid var(--border); border-radius:4px; margin-bottom:8px;
    transition: border-color .15s ease;
  }
  .cert-item:hover{ border-color:var(--green-dim); }
  .cert-item .code{ color:var(--muted); font-size:0.76rem; }
  .cert-item .name{ color:var(--white); font-size:0.95rem; }
  .cert-item .desc{ color:var(--muted); font-size:0.8rem; margin-top:3px; }
  .ok{ color:var(--green); font-size:0.78rem; background:rgba(124,252,154,0.08); padding:4px 10px; border-radius:3px; white-space:nowrap; }

  /* ---------- contact ---------- */
  .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:20px; }
  .cline{
    padding:16px 18px; background:var(--bg-panel); border:1px solid var(--border); border-radius:4px;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    transition: border-color .15s ease;
  }
  .cline:hover{ border-color:var(--green-dim); }
  .cline .k{ color:var(--muted); font-size:0.78rem; }
  .cline .v{ color:var(--white); font-size:0.9rem; margin-top:2px; }
  .copied-tag{ color:var(--green); font-size:0.74rem; opacity:0; transition:opacity .2s ease; }
  .copied-tag.show{ opacity:1; }

  /* ---------- footer statusbar ---------- */
  footer{
    display:flex; justify-content:space-between; align-items:center;
    padding: 10px clamp(16px,4vw,48px); background:var(--bg-panel);
    font-size:0.74rem; color:var(--bg); flex-wrap:wrap; gap:6px;
  }
  .mode{ background:var(--green); color:#04120A; padding:3px 10px; font-weight:700; }
  .status-mid{ color:var(--muted); }
  .status-right{ color:var(--muted); }

  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (max-width: 980px){
    .hero-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .proj-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width: 620px){
    section{ padding:44px 16px; }
    body{ font-size:14px; }
    .cert-item{ grid-template-columns:1fr; gap:6px; }
    .listing td{ display:block; padding:4px 10px; }
    .listing tr{ display:block; padding:10px 0; }
    .titlebar{ gap:12px; }
    .path{ display:none; }
    .resfile, .theme-toggle{ padding:7px 10px; font-size:0.72rem; }
    .proj-grid{ grid-template-columns:1fr; }
  }

/* ---------- resume modal ---------- */
.resume-modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding: 30px;
  opacity:0; visibility:hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.resume-modal.open{
  opacity:1; visibility:visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
.resume-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(5,8,6,0.72);
  backdrop-filter: blur(2px);
}
.resume-modal-panel{
  position:relative; z-index:1;
  width:min(900px, 100%); height:min(85vh, 900px);
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  transform: translateY(16px) scale(0.98);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.resume-modal.open .resume-modal-panel{ transform: translateY(0) scale(1); }
.resume-modal-bar{
  display:flex; align-items:center; gap:16px;
  padding: 12px 16px;
  background: var(--titlebar-bg);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.resume-modal-bar .path{ color:var(--muted); font-size:0.8rem; flex:1; }
.resume-modal-bar .resfile{ font-size:0.76rem; padding:6px 12px; }
.resume-modal-bar .theme-toggle{ font-size:0.76rem; padding:6px 12px; }
.resume-modal-panel iframe{
  flex:1; width:100%; border:none; background:#fff;
}
@media (max-width: 620px){
  .resume-modal{ padding:0; }
  .resume-modal-panel{ width:100%; height:100%; border-radius:0; }
  .resume-modal-bar .path{ display:none; }
}