/* ── TOKENS ── */
:root{
  --bg:#070707;--surface:#0D0D14;--border:#17171F;--border-hi:#262638;
  --accent:#9B77FF;--accent-lo:rgba(155,119,255,.07);--accent-md:rgba(155,119,255,.15);
  --muted:#42425A;--secondary:#72728A;--body:#9494A8;--heading:#EDEDF4;--green:#22C557;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ── 3D CANVAS ── */
#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 40px;height:64px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:background 300ms,border-color 300ms}
nav.scrolled{background:rgba(7,7,7,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--border)}
.nav-inner{width:100%;max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-brand{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--secondary);letter-spacing:.02em;transition:color 200ms}
.nav-brand:hover{color:var(--heading)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:13px;color:var(--secondary);transition:color 200ms}
.nav-links a:hover{color:var(--heading)}

/* ── CONTAINER ── */
.container{max-width:1080px;margin:0 auto;padding:0 40px}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;align-items:center;padding:100px 40px 80px}
.hero-inner{max-width:1080px;margin:0 auto;width:100%;opacity:0;animation:heroIn 800ms cubic-bezier(.16,1,.3,1) 120ms forwards}
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.status{display:inline-flex;align-items:center;gap:9px;margin-bottom:52px;font-size:12px;font-weight:500;color:var(--secondary)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:blink 2.2s ease-in-out 2}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

.hero-name{
  font-size:clamp(56px,9vw,138px);font-weight:800;color:var(--heading);
  line-height:.92;letter-spacing:-.035em;margin-bottom:32px;
  text-shadow:0 1px 0 rgba(155,119,255,.4),0 2px 4px rgba(155,119,255,.2),0 8px 32px rgba(155,119,255,.08);
}
.hero-rule{width:100%;height:1px;background:linear-gradient(90deg,var(--accent),transparent 60%);margin-bottom:32px;opacity:.4}
.hero-tagline{font-size:clamp(20px,2.4vw,30px);font-weight:300;color:var(--heading);line-height:1.35;max-width:640px;margin-bottom:16px;letter-spacing:-.01em}
.hero-sub{font-size:15px;color:var(--secondary);max-width:500px;margin-bottom:52px;line-height:1.75}
.hero-cta{
  display:inline-block;font-size:13px;font-weight:600;color:var(--heading);
  padding:11px 24px;border:1px solid var(--border-hi);border-radius:6px;letter-spacing:.01em;
  transition:border-color 200ms,background 200ms,box-shadow 200ms;
}
.hero-cta:hover{border-color:var(--accent);background:var(--accent-lo);box-shadow:0 0 24px rgba(155,119,255,.15)}

/* ── SECTION LABEL ── */
.section-label{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:32px}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:perspective(900px) rotateX(7deg) translateY(36px);transition:opacity 750ms cubic-bezier(.16,1,.3,1),transform 750ms cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:perspective(900px) rotateX(0deg) translateY(0)}

/* ── PROJECT GRID ── */
section#work{padding:90px 0}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ── PROJECT CARDS (3D) ── */
.project-card{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:28px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transform:perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
  will-change:transform;
  transition:border-color 300ms,box-shadow 300ms;
  cursor:default;
}
.project-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(155,119,255,.4) 50%,transparent 100%);
  opacity:0;transition:opacity 300ms;
}
.project-card::after{
  content:'';position:absolute;inset:0;border-radius:18px;
  background:radial-gradient(circle at 50% 0%,rgba(155,119,255,.05) 0%,transparent 60%);
  opacity:0;transition:opacity 300ms;pointer-events:none;
}
.project-card:hover{border-color:rgba(155,119,255,.3)}
.project-card:hover::before,.project-card:hover::after{opacity:1}

.card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card-category{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
.card-year{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.card-name{font-size:21px;font-weight:700;color:var(--heading);margin-bottom:12px;line-height:1.2}
.card-desc{font-size:14px;color:var(--secondary);line-height:1.72;margin-bottom:20px;flex:1}
.card-tech{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);background:var(--bg);border:1px solid var(--border);padding:3px 8px;border-radius:3px}
.card-footer{border-top:1px solid var(--border);padding-top:16px;margin-top:auto}
.card-link{font-size:13px;font-weight:600;color:var(--accent)}
.card-link:hover{text-decoration:underline}
.card-no-link{font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace}

/* ── SKILLS ── */
section#skills{padding:0 0 90px}
.skills-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.skill-group{padding:28px 0;border-bottom:1px solid var(--border)}
.skill-group:nth-child(odd){padding-right:52px;border-right:1px solid var(--border)}
.skill-group:nth-child(even){padding-left:52px}
.skill-label{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:10px}
.skill-items{font-size:14px;color:var(--body);line-height:1.85}

/* ── CONTACT CONNECTION CENTER ── */

section#contact{
  padding:110px 0 110px;
}

.contact-command-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:42px;
}

.contact-headline{
  font-size:clamp(42px,5.5vw,78px);
  font-weight:800;
  color:var(--heading);
  letter-spacing:-.045em;
  line-height:.98;
  margin-bottom:20px;
  text-shadow:0 10px 50px rgba(155,119,255,.10);
}

.contact-sub{
  font-size:15px;
  color:var(--secondary);
  max-width:520px;
  line-height:1.75;
  margin-bottom:0;
}

.contact-status-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border:1px solid rgba(34,197,87,.22);
  border-radius:999px;
  background:rgba(34,197,87,.045);
  color:#78d99a;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  white-space:nowrap;
}

.contact-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(34,197,87,.65);
}


/* GRID */

.contact-center-grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:20px;
  align-items:stretch;
}


/* LEFT PANEL */

.contact-connect-panel,
.contact-form{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(
      145deg,
      rgba(20,20,31,.72),
      rgba(8,8,13,.66)
    );
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:20px;
  box-shadow:
    0 25px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.045);
  transform-style:preserve-3d;
  transition:
    transform 500ms cubic-bezier(.16,1,.3,1),
    border-color 300ms,
    box-shadow 300ms;
}

.contact-connect-panel{
  padding:26px;
}

.contact-connect-panel::before,
.contact-form::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(155,119,255,.7),
    transparent
  );
  opacity:.6;
}

.contact-connect-panel:hover,
.contact-form:hover{
  border-color:rgba(155,119,255,.22);
  box-shadow:
    0 30px 80px rgba(0,0,0,.38),
    0 0 40px rgba(155,119,255,.055),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.contact-panel-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.16em;
  margin-bottom:18px;
}


/* CHANNEL */

.contact-channel{
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px;
  margin-bottom:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  transition:
    transform 250ms,
    border-color 250ms,
    background 250ms;
}

.contact-channel:hover{
  transform:translateX(4px);
  border-color:rgba(155,119,255,.25);
  background:rgba(155,119,255,.055);
}

.contact-channel-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(155,119,255,.09);
  color:#b9a5ff;
  font-size:16px;
  flex-shrink:0;
}

.contact-channel small{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:2px;
}

.contact-channel strong{
  display:block;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:var(--heading);
}

.contact-channel-arrow{
  margin-left:auto;
  color:var(--muted);
  font-size:15px;
}

.contact-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.contact-links a{
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.015);
  font-size:12px;
  color:var(--secondary);
  transition:
    transform 250ms,
    border-color 250ms,
    color 250ms,
    background 250ms;
}

.contact-links a:hover{
  transform:translateY(-3px);
  border-color:rgba(155,119,255,.25);
  color:var(--heading);
  background:rgba(155,119,255,.045);
}

.contact-mini-note{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--muted);
}

.contact-mini-note span{
  color:var(--green);
  margin-right:6px;
}


/* FORM */

.contact-form{
  padding:28px;
}

.contact-form-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px;
}

.contact-form-top h3{
  font-size:21px;
  font-weight:700;
  color:var(--heading);
  letter-spacing:-.02em;
}

.contact-terminal-id{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  color:var(--muted);
  letter-spacing:.08em;
  white-space:nowrap;
}

.contact-form label{
  display:block;
  margin-bottom:16px;
}

.contact-form label > span{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  font-weight:500;
  color:var(--secondary);
}

.contact-form label b{
  color:var(--accent);
  font-weight:500;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(0,0,0,.22);
  color:var(--heading);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;
  outline:none;
  padding:12px 13px;
  transition:
    border-color 200ms,
    box-shadow 200ms,
    background 200ms;
}

.contact-form textarea{
  min-height:140px;
  resize:vertical;
  line-height:1.65;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#4d4b5d;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:rgba(155,119,255,.55);
  background:rgba(155,119,255,.025);
  box-shadow:0 0 0 3px rgba(155,119,255,.055);
}

.contact-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}


/* SEND BUTTON */

.contact-send-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
  padding:13px 16px;
  border:1px solid rgba(155,119,255,.45);
  border-radius:11px;
  background:linear-gradient(
    135deg,
    rgba(155,119,255,.20),
    rgba(155,119,255,.08)
  );
  color:var(--heading);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:
    transform 250ms,
    border-color 250ms,
    background 250ms,
    box-shadow 250ms;
}

.contact-send-btn:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  background:rgba(155,119,255,.18);
  box-shadow:0 12px 35px rgba(155,119,255,.12);
}

.contact-send-btn:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}

.contact-form-result{
  min-height:20px;
  margin-top:13px;
  font-size:11px;
  color:var(--muted);
}

.contact-form-result.success{
  color:#65d88b;
}

.contact-form-result.error{
  color:#ef8888;
}


/* MOBILE */

@media(max-width:768px){

  section#contact{
    padding:72px 0;
  }

  .contact-command-head{
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:28px;
  }

  .contact-center-grid{
    grid-template-columns:1fr;
  }

  .contact-form-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .contact-form,
  .contact-connect-panel{
    padding:20px;
  }

}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:22px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer-copy{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:12px;color:var(--muted);transition:color 200ms}
.footer-links a:hover{color:var(--secondary)}

/* ── MOBILE ── */
@media(max-width:768px){
  nav{padding:0 20px}.nav-links{gap:20px}
  #hero{padding:88px 20px 60px}.container{padding:0 20px}
  .project-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .skill-group:nth-child(odd){padding-right:0;border-right:none}
  .skill-group:nth-child(even){padding-left:0}
  section#work{padding:64px 0}section#skills{padding:0 0 64px}section#contact{padding:72px 0}
}
@media(max-width:768px){
  #edit-panel{width:calc(100vw - 20px);max-width:none;height:calc(100vh - 20px);max-height:none;border-radius:18px}
  .ep-header{padding:16px 18px}.ep-section{padding:18px}.ep-footer{padding:12px}.ep-btn{padding:10px 8px}
}

@media(prefers-reduced-motion:reduce){
  .hero-inner{animation:none;opacity:1}.status-dot{animation:none}
  .reveal{opacity:1;transform:none}
}

/* ── EDIT TOGGLE ── */
#edit-toggle{
  position:fixed;bottom:28px;right:28px;z-index:300;
  display:flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--border-hi);color:var(--secondary);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  padding:8px 16px;border-radius:24px;cursor:pointer;letter-spacing:.02em;
  transition:all 200ms;box-shadow:0 4px 20px rgba(0,0,0,.5);
}
#edit-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-lo);box-shadow:0 4px 20px rgba(155,119,255,.15)}

/* ── OVERLAY ── */
#ep-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#ep-overlay.active{display:block}

/* ── EDIT PANEL ── */
#edit-panel{position:fixed;top:50%;left:50%;width:min(980px,calc(100vw - 40px));height:min(86vh,820px);max-width:calc(100vw - 40px);background:linear-gradient(145deg,rgba(19,19,29,.96),rgba(7,7,12,.97));border:1px solid rgba(255,255,255,.11);border-radius:24px;z-index:500;display:flex;flex-direction:column;transform:translate(-50%,-46%) scale(.96);opacity:0;visibility:hidden;transition:transform 300ms cubic-bezier(.16,1,.3,1),opacity 220ms ease,visibility 220ms;box-shadow:0 35px 100px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden}
#edit-panel.active{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
.ep-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);flex-shrink:0}
.ep-title{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--heading)}
.ep-close-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px;line-height:1;transition:color 200ms;border-radius:4px}
.ep-close-btn:hover{color:var(--heading);background:var(--border)}
.ep-body{flex:1;overflow-y:auto;padding:4px 0 10px}.ep-body::-webkit-scrollbar{width:6px}
.ep-body::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px}
.ep-section{padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.06)}
.ep-section-title{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.ep-field{margin-bottom:12px}
.ep-field:last-child{margin-bottom:0}
.ep-field>label{display:block;font-size:11px;font-weight:500;color:var(--secondary);margin-bottom:5px}
.ep-field input[type=text],.ep-field input[type=email],.ep-field input[type=url],.ep-field textarea{width:100%;background:var(--bg);border:1px solid var(--border-hi);border-radius:4px;color:var(--heading);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;padding:8px 10px;outline:none;transition:border-color 200ms;resize:vertical}
.ep-field input:focus,.ep-field textarea:focus{border-color:var(--accent)}
.ep-field textarea{min-height:72px;line-height:1.55}
.ep-field-check>label{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--body);font-weight:400}
.ep-field-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.ep-field-row{display:grid;grid-template-columns:90px 1fr;gap:10px}
.ep-field-row>div{display:flex;flex-direction:column}
.ep-field-row>div>label{display:block;font-size:11px;font-weight:500;color:var(--secondary);margin-bottom:5px}
.ep-field-row>div>input{width:100%;background:var(--bg);border:1px solid var(--border-hi);border-radius:4px;color:var(--heading);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;padding:8px 10px;outline:none;transition:border-color 200ms}
.ep-field-row>div>input:focus{border-color:var(--accent)}
.ep-project{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:7px;padding:14px;margin-bottom:10px}
.ep-project-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ep-project-num{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--accent)}
.ep-remove-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:500;padding:2px 8px;border-radius:3px;cursor:pointer;transition:all 200ms}
.ep-remove-btn:hover{border-color:#ef4444;color:#ef4444}
.ep-add-btn{width:100%;background:none;border:1px dashed var(--border-hi);color:var(--secondary);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:500;padding:10px;border-radius:5px;cursor:pointer;margin-top:2px;transition:all 200ms}
.ep-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-lo)}
.ep-skill-group{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:7px;padding:12px;margin-bottom:10px}
.ep-skill-group:last-child{margin-bottom:0}
.ep-footer{padding:14px 20px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18);display:flex;gap:8px;flex-shrink:0}
.ep-btn{flex:1;padding:9px 10px;border-radius:5px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 200ms;border:1px solid transparent}
.ep-btn-ghost{background:none;border-color:var(--border-hi);color:var(--secondary)}
.ep-btn-ghost:hover{color:var(--heading);border-color:var(--secondary)}
.ep-btn-secondary{background:none;border-color:var(--border-hi);color:var(--body)}
.ep-btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.ep-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.ep-btn-primary:hover{background:#8960f0;border-color:#8960f0}
/* ── TABBED WEBSITE EDITOR ── */
#edit-panel{width:min(1080px,calc(100vw - 32px));height:min(88vh,780px);}
.ep-body{display:flex;min-height:0;overflow:hidden;padding:0!important;}
.ep-sidebar{width:190px;flex:0 0 190px;border-right:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018);padding:12px;overflow-y:auto;}
.ep-sidebar-title{font:700 9px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#5f5b6c;padding:8px 10px 10px;}
.ep-tab{width:100%;display:flex;align-items:center;gap:9px;padding:10px 11px;margin-bottom:4px;border:1px solid transparent;border-radius:10px;background:transparent;color:#858294;font:500 12px 'Plus Jakarta Sans',sans-serif;text-align:left;cursor:pointer;transition:.2s;}
.ep-tab:hover{background:rgba(255,255,255,.04);color:#eee;}
.ep-tab.active{background:rgba(155,119,255,.11);border-color:rgba(155,119,255,.20);color:#c7b8ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
.ep-tab-icon{width:18px;text-align:center;font-size:13px;opacity:.9;}
.ep-tab-count{margin-left:auto;font:500 9px 'JetBrains Mono',monospace;color:#625e70;background:rgba(255,255,255,.04);padding:2px 5px;border-radius:999px;}
.ep-main{min-width:0;flex:1;overflow-y:auto;}
.ep-main::-webkit-scrollbar{width:5px}.ep-main::-webkit-scrollbar-thumb{background:#292636;border-radius:5px}
.ep-tab-pane{display:none}.ep-tab-pane.active{display:block}
.ep-pane-head{padding:20px 26px 4px}.ep-pane-title{font-size:18px;font-weight:700;color:#f1eff6}.ep-pane-sub{margin-top:3px;font-size:11px;color:#676375;line-height:1.5}
.ep-section:first-child{padding-top:16px}
@media(max-width:700px){#edit-panel{width:calc(100vw - 16px);height:calc(100vh - 16px);border-radius:18px}.ep-body{flex-direction:column}.ep-sidebar{width:100%;flex:0 0 auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:8px;overflow-x:auto;overflow-y:hidden;display:flex;gap:5px}.ep-sidebar-title{display:none}.ep-tab{width:auto;flex:0 0 auto;margin:0;padding:8px 10px;font-size:11px}.ep-tab-count{display:none}.ep-main{flex:1}.ep-pane-head{padding:16px 18px 2px}.ep-section{padding:16px 18px}}

.toast{position:fixed;bottom:88px;right:28px;z-index:600;background:var(--surface);border:1px solid var(--border-hi);color:var(--heading);font-size:12px;font-weight:500;padding:10px 16px;border-radius:7px;opacity:0;transform:translateY(8px);transition:opacity 250ms,transform 250ms;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-color:var(--green);color:var(--green)}

/* ── PREMIUM GLASS / PROFILE UPGRADE ── */
:root{--glass:rgba(16,16,25,.58);--glass-hi:rgba(255,255,255,.055);--glow:rgba(155,119,255,.22)}
body{background:radial-gradient(circle at 50% -10%,rgba(155,119,255,.10),transparent 34%),#050506;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(120deg,rgba(155,119,255,.025),transparent 35%,rgba(255,255,255,.015) 70%,transparent)}
#bg{opacity:.42;filter:saturate(1.15)}
nav{height:66px;padding:0 32px;background:rgba(5,5,6,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:rgba(255,255,255,.045)}
.nav-inner{max-width:1080px}.nav-brand{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;color:#eee;letter-spacing:-.02em}.nav-brand::before{content:'◆';font-size:8px;color:var(--accent);margin-right:9px;vertical-align:2px}.nav-links{gap:8px}.nav-links a{padding:8px 13px;border-radius:10px;color:#85859a}.nav-links a:hover{color:#fff;background:rgba(255,255,255,.045)}
#hero{min-height:84vh;padding:105px 40px 65px;position:relative}
.hero-inner{max-width:1080px}.status{margin-bottom:34px;padding:7px 12px;border:1px solid rgba(155,119,255,.2);background:rgba(155,119,255,.06);border-radius:999px}.hero-name{font-size:clamp(52px,7.5vw,112px);letter-spacing:-.065em;line-height:.05;background:linear-gradient(180deg,#fff 0%,#d8d3e8 48%,#8e879e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 20px 70px rgba(155,119,255,.13)}
.hero-rule{height:1px;margin:42px 0 30px;background:linear-gradient(90deg,var(--accent),rgba(155,119,255,.15),transparent 72%);opacity:.65}.hero-tagline{font-size:clamp(20px,2.4vw,30px);font-weight:400;max-width:760px}.hero-sub{max-width:600px;font-size:14px}.hero-cta{border-radius:999px;padding:12px 20px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.container{max-width:1080px}.profile-section{padding:30px 40px 100px;position:relative}.profile-wrap{max-width:1100px;margin:0 auto}.profile-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}.profile-title{font-size:clamp(34px,4vw,56px);line-height:.98;letter-spacing:-.045em;color:#f3f2f7}.profile-title span{color:#777184}.profile-edit-btn{flex:0 0 auto;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#e9e7ef;border-radius:999px;padding:11px 17px;font:600 12px 'Plus Jakarta Sans',sans-serif;cursor:pointer;backdrop-filter:blur(12px);transition:.25s}.profile-edit-btn:hover{border-color:var(--accent);background:rgba(155,119,255,.10);transform:translateY(-2px)}
.profile-grid{display:grid;grid-template-columns:1.7fr .8fr;gap:18px}.profile-card{background:linear-gradient(145deg,rgba(20,20,30,.72),rgba(9,9,14,.62));border:1px solid rgba(255,255,255,.085);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 24px 70px rgba(0,0,0,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.profile-main{display:flex;align-items:center;gap:28px;padding:32px}.profile-avatar{width:86px;height:86px;border-radius:24px;display:grid;place-items:center;flex:0 0 auto;font-size:34px;font-weight:800;color:#fff;background:linear-gradient(145deg,#a789ff,#5d3fc1);box-shadow:0 18px 40px rgba(108,75,210,.28),inset 0 1px 0 rgba(255,255,255,.35)}.profile-status{display:inline-flex;margin-bottom:9px;padding:5px 9px;border-radius:999px;background:rgba(34,197,87,.07);border:1px solid rgba(34,197,87,.18);font-size:10px;color:#72dd95}.profile-main h3{font-size:21px;color:#f2f0f6;margin-bottom:4px}.profile-tagline{font-size:13px;color:#a8a5b5;margin-bottom:9px}.profile-bio{font-size:12px;color:#77768a;max-width:680px;line-height:1.75;margin-bottom:14px}.profile-email{font-size:13px;color:#b79fff}.profile-stats{display:grid;grid-template-columns:1fr;align-content:center;padding:25px 28px;gap:18px}.stat{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:12px}.stat:last-child{border-bottom:0;padding-bottom:0}.stat strong{font-size:27px;color:#eee}.stat span{font-size:11px;color:#676579}.profile-links{display:flex;gap:10px;margin-top:18px}.profile-links a{padding:9px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);font-size:11px;color:#858296;transition:.2s}.profile-links a:hover{color:#fff;border-color:rgba(155,119,255,.35);background:rgba(155,119,255,.07)}
section#work{padding:40px 0 100px}.project-grid{gap:18px}.project-card{background:linear-gradient(145deg,rgba(19,19,29,.78),rgba(8,8,13,.66));border-color:rgba(255,255,255,.075);border-radius:20px;padding:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 22px 60px rgba(0,0,0,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.project-card:hover{border-color:rgba(155,119,255,.34);box-shadow:0 24px 70px rgba(0,0,0,.3),0 0 45px rgba(155,119,255,.06)}.card-name{font-size:20px}.tag{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#6e6b7c}.card-footer{border-color:rgba(255,255,255,.06)}
section#skills{padding:0 0 100px}.skills-grid{border-top-color:rgba(255,255,255,.07)}.skill-group{border-bottom-color:rgba(255,255,255,.07)}.skill-items{color:#aaa7b7}.skill-label{color:#716d80}
section#contact{padding:75px 0 90px}.contact-headline{font-size:clamp(42px,5.5vw,72px)}footer{border-color:rgba(255,255,255,.07)}
.ep-skill-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ep-remove-skill{margin-left:auto}
@media(max-width:768px){nav{padding:0 18px}.nav-links{gap:2px}.nav-links a{padding:7px 8px}.profile-section{padding:20px 20px 70px}.profile-top{align-items:flex-start;flex-direction:column}.profile-grid{grid-template-columns:1fr}.profile-main{align-items:flex-start;flex-direction:column;padding:25px}.profile-stats{grid-template-columns:repeat(3,1fr);gap:10px}.stat{display:block}.stat strong{display:block;margin-bottom:2px}.stat span{font-size:9px}.profile-links{flex-wrap:wrap}#hero{padding-left:20px;padding-right:20px}.hero-name{font-size:clamp(58px,18vw,100px)}}

/* ── PORTFOLIO CATEGORIES ── */
#dynamic-nav-categories{display:contents}
.category-nav-link{display:inline-block;padding:8px 13px;border-radius:10px;font-size:13px;color:#85859a;transition:color 200ms,background 200ms}
.category-nav-link:hover{color:#fff;background:rgba(255,255,255,.045)}
.portfolio-category{padding:0 0 100px}
.category-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.category-title{font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-.045em;color:#f3f2f7}
.category-desc{max-width:620px;margin-top:12px;font-size:14px;color:#77768a;line-height:1.75}
.category-action{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:11px 16px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.04);color:#b9b4c6;font-size:12px;font-weight:600}
.category-action:hover{border-color:rgba(155,119,255,.35);color:#fff;background:rgba(155,119,255,.08)}
.category-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.category-card{padding:26px;border-radius:20px;background:linear-gradient(145deg,rgba(19,19,29,.72),rgba(8,8,13,.62));border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 20px 55px rgba(0,0,0,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.category-card h3{font-size:18px;color:#eee;margin-bottom:8px}.category-card p{font-size:12px;color:#8a8798;line-height:1.7}.category-item-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}.category-item-list li{padding:9px 11px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);border-radius:10px;color:#b1adbc;font-size:12px}.category-empty{font-size:13px;color:#625f70;padding:20px 0}.category-type{font:500 10px 'JetBrains Mono',monospace;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}
.ep-category{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:7px;padding:14px;margin-bottom:10px}.ep-category-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.ep-category-num{font:600 10px 'JetBrains Mono',monospace;color:var(--accent);letter-spacing:.08em}.ep-category select{width:100%;background:var(--bg);border:1px solid var(--border-hi);border-radius:4px;color:var(--heading);font:13px 'Plus Jakarta Sans',sans-serif;padding:8px 10px;outline:none}.ep-category select:focus{border-color:var(--accent)}
.ep-category textarea{min-height:90px}
@media(max-width:768px){.category-head{align-items:flex-start;flex-direction:column}.category-card-grid{grid-template-columns:1fr}.portfolio-category{padding-bottom:70px}.category-nav-link{padding:7px 8px;font-size:12px}}

/* ── FILES & MEDIA ── */
.file-help{font-size:10px;color:#6f6b7c;line-height:1.55;margin-top:6px}
.file-upload{border:1px dashed rgba(155,119,255,.28);background:rgba(155,119,255,.035);border-radius:12px;padding:13px;margin-top:9px}
.file-upload input[type=file]{width:100%;font-size:11px;color:#8c8799}
.file-upload input[type=file]::file-selector-button{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:#ddd8e8;border-radius:7px;padding:7px 10px;margin-right:9px;cursor:pointer}
.file-list{display:grid;gap:8px;margin-top:10px}
.file-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.20);border-radius:9px;min-width:0}
.file-row img{width:52px;height:42px;object-fit:cover;border-radius:7px;border:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.file-row-copy{min-width:0;flex:1}.file-row-name{font-size:11px;color:#c5c0cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-row-meta{font-size:9px;color:#666274;margin-top:2px}
.file-remove{background:none;border:1px solid rgba(255,255,255,.08);color:#777184;border-radius:6px;padding:4px 7px;font-size:10px;cursor:pointer}.file-remove:hover{color:#fff;border-color:rgba(239,68,68,.5)}
.project-media{margin:-28px -28px 22px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07);background:#08080d;aspect-ratio:16/8}
.project-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:transform .5s,opacity .3s}.project-card:hover .project-media img{transform:scale(1.035);opacity:1}
.project-media-empty{height:100%;display:grid;place-items:center;color:#4d495b;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.media-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}.media-gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.07)}
.category-files{display:grid;gap:14px;margin-top:20px}.category-file{border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.16)}
.category-file img{display:block;width:100%;max-height:320px;object-fit:cover}.category-file-body{padding:12px 14px}.category-file-name{font-size:12px;color:#d0cbd9}.category-file-link{display:inline-flex;margin-top:8px;font-size:11px;color:var(--accent)}
.profile-file-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.profile-file-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.03);font-size:10px;color:#aaa5b5}
.profile-avatar.has-image{padding:0;overflow:hidden}.profile-avatar.has-image img{width:100%;height:100%;object-fit:cover}
.ep-file-box{border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px;background:rgba(0,0,0,.18);margin-top:9px}.ep-file-title{font-size:11px;color:#c4bfce;font-weight:600}.ep-file-preview{margin-top:9px}.ep-file-preview img{display:block;width:100%;max-height:150px;object-fit:cover;border-radius:8px}.ep-file-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}.ep-file-name{font-size:10px;color:#777183;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ep-upload-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px dashed rgba(155,119,255,.35);border-radius:7px;color:#aaa4b7;background:rgba(155,119,255,.04);font-size:10px;cursor:pointer}.ep-upload-btn:hover{border-color:var(--accent);color:#fff}.ep-upload-btn input{display:none}
.category-auto-note{padding:9px 10px;border-radius:8px;background:rgba(155,119,255,.055);border:1px solid rgba(155,119,255,.12);font-size:10px;color:#8d879d;line-height:1.5;margin-top:8px}
@media(max-width:768px){.media-gallery{grid-template-columns:1fr 1fr}.media-gallery img{height:100px}}

/* ── CATEGORY SIDEBAR / UPLOAD FIXES ── */
.ep-sidebar{overflow-y:auto}.ep-sidebar-divider{height:1px;background:rgba(255,255,255,.07);margin:12px 6px}.ep-sidebar-section-label{padding:4px 10px 8px;font:600 9px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#575264}.ep-add-category-side{width:100%;margin-top:8px;padding:9px 10px;border:1px dashed rgba(155,119,255,.35);border-radius:9px;background:rgba(155,119,255,.04);color:#a99ed0;font:600 11px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:.2s}.ep-add-category-side:hover{border-color:var(--accent);background:rgba(155,119,255,.09);color:#fff}.ep-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.field-note{font-weight:400;color:#5e586b}.category-upload-box{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px;border:1px dashed rgba(155,119,255,.28);border-radius:10px;background:rgba(155,119,255,.025)}.category-upload-box.single-file{min-height:58px}.category-upload-trigger{cursor:pointer;flex:0 0 auto}.upload-status{font-size:10px;color:#686273;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-list{display:grid;gap:7px;margin-top:8px}.file-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(0,0,0,.14)}.file-row img{width:46px;height:36px;object-fit:cover;border-radius:6px}.file-row-copy{min-width:0;flex:1}.file-row-name{font-size:10px;color:#c9c3d0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-row-meta{font-size:9px;color:#625d6b;margin-top:2px}.file-remove{flex:0 0 auto;background:none;border:1px solid rgba(255,255,255,.08);color:#716b7a;border-radius:5px;padding:4px 7px;font-size:9px;cursor:pointer}.file-remove:hover{border-color:#ef4444;color:#ef4444}
/* ── FINAL COMPACT PORTFOLIO SCALE ── */
.nav-inner{max-width:1040px}
nav{height:62px;padding:0 24px}.nav-links{gap:4px}.nav-links a,.category-nav-link{font-size:12px;padding:7px 10px}
.nav-brand{font-size:12px}
#hero{min-height:76vh;padding:92px 32px 52px}
.hero-inner{max-width:1040px}
.status{margin-bottom:28px;font-size:11px;padding:6px 10px}
.hero-name{
  font-size:clamp(46px,6.2vw,88px);
  line-height:1.05;
  padding-bottom:8px;
  overflow:visible;
}
.hero-rule{margin:30px 0 24px}
.hero-tagline{font-size:clamp(18px,2vw,24px);max-width:680px}
.hero-sub{font-size:13px;max-width:560px;margin-bottom:36px}
.hero-cta{font-size:12px;padding:10px 17px}
.container{max-width:1040px;padding:0 32px}
.profile-section{padding:20px 32px 72px}.profile-wrap{max-width:1040px}
.profile-title{font-size:clamp(30px,3.5vw,46px)}
.profile-main{padding:26px;gap:22px}.profile-avatar{width:72px;height:72px;border-radius:20px;font-size:28px}.profile-main h3{font-size:19px}.profile-bio{font-size:11.5px}.profile-stats{padding:22px 24px;gap:14px}.stat strong{font-size:23px}
section#work{padding:30px 0 72px}.project-card{padding:22px;border-radius:18px}.card-name{font-size:18px}.card-desc{font-size:13px}.tag{font-size:10px}
section#skills{padding:0 0 72px}.skill-group{padding:22px 0}.skill-items{font-size:13px}
.portfolio-category{padding-bottom:72px}.category-title{font-size:clamp(28px,3.5vw,44px)}.category-desc{font-size:13px}.category-card{padding:22px}.category-card h3{font-size:17px}
section#contact{padding:58px 0 70px}.contact-headline{font-size:clamp(36px,5vw,62px)}
footer{padding:18px 0}
/* Editor: clean yesterday-style glass modal, not a full-height drawer */
#edit-panel{width:min(1060px,calc(100vw - 40px));height:min(84vh,760px);max-height:84vh;border:1px solid rgba(255,255,255,.10);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
.ep-header{padding:16px 22px;background:rgba(255,255,255,.018)}
.ep-title{font-size:12px}.ep-body{background:rgba(5,5,8,.18)}
.ep-sidebar{width:205px;flex-basis:205px;padding:14px;background:rgba(255,255,255,.018)}
.ep-sidebar-title{padding:7px 10px 12px}
.ep-tab{padding:10px 12px;font-size:12px}
.ep-main{background:rgba(7,7,10,.18)}
.ep-pane-head{padding:18px 24px 2px}.ep-pane-title{font-size:17px}.ep-pane-sub{font-size:10.5px}
.ep-section{padding:20px 24px}.ep-field{margin-bottom:10px}.ep-field>label{font-size:10px}.ep-field input[type=text],.ep-field input[type=email],.ep-field input[type=url],.ep-field textarea,.ep-field-row>div>input{font-size:12px;padding:7px 9px}
.ep-footer{padding:12px 18px}.ep-btn{font-size:11px;padding:8px 10px}
@media(max-width:700px){#hero{padding:82px 20px 46px;min-height:72vh}.container{padding:0 20px}.profile-section{padding:16px 20px 60px}.hero-name{font-size:clamp(48px,15vw,82px)}.nav-links a,.category-nav-link{font-size:11px;padding:6px 7px}.nav-links{overflow-x:auto;max-width:72vw}.nav-brand{white-space:nowrap}.profile-title{font-size:32px}.ep-sidebar{width:100%;flex-basis:auto}.ep-main{min-height:0}}

#media-viewer {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.media-viewer-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(18px);
}

.media-viewer-window {
  position: relative;
  width: min(1000px, 96vw);
  height: min(900px, 94vh);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(18,18,28,.96);
  box-shadow: 0 30px 100px rgba(0,0,0,.65);
}

.media-viewer-title {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 70px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
}

.media-viewer-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: white;
  font-size: 28px;
  cursor: pointer;
}

.media-viewer-close:hover {
  background: rgba(255,255,255,.16);
}

.media-viewer-content {
  width: 100%;
  height: calc(100% - 60px);
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 25px;
}

.media-viewer-pdf {
  max-width: 100%;
  height: auto;
  background: white;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

.media-viewer-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.pdf-viewer-error {
  color: #fff;
  padding: 40px;
}

@media (max-width: 700px) {
  .media-viewer-backdrop {
    padding: 10px;
  }

  .media-viewer-window {
    width: 100%;
    height: 96vh;
    border-radius: 16px;
  }

  .media-viewer-content {
    padding: 12px;
  }
}
/* =========================================================
   CERTIFICATE EDITOR
   ========================================================= */

.certificate-category-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.certificate-category-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.certificate-category-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 17px;
}

.certificate-category-intro strong {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.certificate-category-intro p {
  margin: 0;
  color: rgba(255,255,255,.52);
  font-size: 12px;
  line-height: 1.55;
}

.certificate-editor-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.certificate-editor-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 35px rgba(0,0,0,.16);
}

.certificate-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
}

.certificate-editor-sub {
  margin-top: 5px;
  color: rgba(255,255,255,.42);
  font-size: 11px;
  line-height: 1.4;
}

.certificate-empty {
  padding: 28px 18px;
  text-align: center;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 15px;
  color: rgba(255,255,255,.40);
  font-size: 12px;
}


/* Certificate fields */

.ep-cert-name,
.ep-cert-issuer,
.ep-cert-date,
.ep-cert-link,
.ep-cert-description {
  width: 100%;
}

.ep-cert-description {
  min-height: 90px;
  resize: vertical;
}


/* Certificate website cards */

.certificate-card {
  position: relative;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );
  overflow: hidden;
}

.certificate-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,.06),
      transparent 38%
    );
}

.certificate-number {
  position: relative;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.40);
  margin-bottom: 8px;
}

.certificate-name {
  position: relative;
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}

.certificate-issuer {
  position: relative;
  margin-top: 7px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
}

.certificate-date {
  position: relative;
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.58);
  font-size: 10px;
}

.certificate-description {
  position: relative;
  margin-top: 14px;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1.65;
}

.certificate-file {
  position: relative;
  margin-top: 16px;
}

.certificate-file .media-preview {
  width: 100%;
  max-height: 360px;
  border-radius: 14px;
  overflow: hidden;
}

.certificate-file img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

.certificate-verify {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: 11px;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.certificate-verify:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}


/* Certificate responsive layout */

@media (max-width: 700px) {

  .certificate-editor-card {
    padding: 14px;
    border-radius: 15px;
  }

  .certificate-editor-header {
    flex-direction: column;
  }

  .certificate-card {
    padding: 17px;
    border-radius: 18px;
  }

  .certificate-name {
    font-size: 17px;
  }

}


/* =========================================================
   PDF PREVIEW
   ========================================================= */

.pdf-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.025);
}

.pdf-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}


/* =========================================================
   MEDIA VIEWER
   ========================================================= */

.media-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(18px);
}

.media-viewer-overlay.active {
  display: flex;
}

.media-viewer {
  position: relative;
  width: min(1100px, 94vw);
  height: min(90vh, 850px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,15,18,.92);
  box-shadow: 0 30px 100px rgba(0,0,0,.5);
}

.media-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 17px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.media-viewer-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

.media-viewer-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.75);
  cursor: pointer;
}

.media-viewer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: auto;
}

.media-viewer-body img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.media-viewer-body canvas {
  display: block;
  max-width: 100%;
  height: auto;
}


/* Mobile viewer */

@media (max-width: 600px) {

  .media-viewer-overlay {
    padding: 10px;
  }

  .media-viewer {
    width: 100%;
    height: 92vh;
    border-radius: 16px;
  }

  .media-viewer-body {
    padding: 10px;
  }

}
/* =========================================================
   UNIVERSAL 3D GLASS CARD SYSTEM
   ========================================================= */

.project-card,
.profile-card,
.certificate-card,
.category-card,
.profile-file-card,
.category-file,
.skill-group {

  position: relative;

  transform-style: preserve-3d;

  perspective: 1000px;

  will-change: transform;

  backface-visibility: hidden;

  transition:
    transform 600ms cubic-bezier(.16,1,.3,1),
    box-shadow 600ms,
    border-color 300ms,
    background 500ms;

}


/* ---------------------------------------------------------
   GLASS EDGE
   --------------------------------------------------------- */

.project-card::before,
.certificate-card::before,
.category-card::before,
.profile-file-card::before,
.category-file::before,
.skill-group::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      transparent 30%,
      transparent 70%,
      rgba(155,119,255,.08)
    );

  opacity: 0;

  transition:
    opacity 400ms ease;

}


/* ---------------------------------------------------------
   PURPLE LIGHT
   --------------------------------------------------------- */

.project-card::after,
.certificate-card::after,
.category-card::after,
.profile-file-card::after,
.category-file::after,
.skill-group::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(155,119,255,.13),
      transparent 60%
    );

  opacity: 0;

  transition:
    opacity 400ms ease;

}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.project-card:hover,
.certificate-card:hover,
.category-card:hover,
.profile-file-card:hover,
.category-file:hover,
.skill-group:hover {

  border-color:
    rgba(155,119,255,.38);

}


.project-card:hover::before,
.certificate-card:hover::before,
.category-card:hover::before,
.profile-file-card:hover::before,
.category-file:hover::before,
.skill-group:hover::before,

.project-card:hover::after,
.certificate-card:hover::after,
.category-card:hover::after,
.profile-file-card:hover::after,
.category-file:hover::after,
.skill-group:hover::after {

  opacity: 1;

}


/* ---------------------------------------------------------
   3D CONTENT DEPTH
   --------------------------------------------------------- */

.project-card > *,
.certificate-card > *,
.category-card > *,
.profile-file-card > *,
.category-file > *,
.skill-group > * {

  position: relative;

  transform:
    translateZ(10px);

}


/* ---------------------------------------------------------
   HEADINGS COME FORWARD
   --------------------------------------------------------- */

.project-card h3,
.certificate-card h3,
.category-card h3,
.profile-file-title,
.skill-label {

  transform:
    translateZ(18px);

}


/* ---------------------------------------------------------
   TAGS FLOAT SLIGHTLY
   --------------------------------------------------------- */

.project-card .tag {

  transform:
    translateZ(14px);

  transition:
    transform 250ms ease;

}

.project-card:hover .tag {

  transform:
    translateZ(18px);

}


/* ---------------------------------------------------------
   CERTIFICATE PREVIEW DEPTH
   --------------------------------------------------------- */

.certificate-preview,
.certificate-file-preview,
.profile-file-preview,
.project-media {

  transform:
    translateZ(12px);

}


/* ---------------------------------------------------------
   SMOOTH MOBILE FALLBACK
   --------------------------------------------------------- */

@media (hover: none) {

  .project-card,
  .certificate-card,
  .category-card,
  .profile-file-card,
  .category-file,
  .skill-group {

    transform:
      none !important;

  }

  .project-card > *,
  .certificate-card > *,
  .category-card > *,
  .profile-file-card > *,
  .category-file > *,
  .skill-group > * {

    transform:
      none;

  }

}
/* =========================================================
   HERO — TEXT + BIG PROFILE PHOTO
   ========================================================= */

#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 40px 80px;
  overflow: hidden;
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: center;
  gap: 70px;

  position: relative;
  z-index: 2;
}

.hero-content {
  min-width: 0;
}


/* =========================================================
   BIG ROUND PROFILE PHOTO
   ========================================================= */

.hero-photo-wrap {
  position: relative;

  width: 390px;
  height: 390px;

  display: flex;
  align-items: center;
  justify-content: center;

  justify-self: center;

  perspective: 1000px;

  animation:
    heroPhotoFloat 6s ease-in-out infinite;
}


.hero-photo {
  position: relative;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(155,119,255,.20),
      var(--surface) 65%
    );

  border:
    1px solid rgba(155,119,255,.45);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 0 45px rgba(155,119,255,.16),
    0 30px 80px rgba(0,0,0,.55);

  transform:
    perspective(1000px)
    rotateY(-8deg)
    rotateX(4deg)
    translateZ(20px);

  transform-style: preserve-3d;

  transition:
    transform 600ms cubic-bezier(.16,1,.3,1),
    box-shadow 500ms ease;
}


/* =========================================================
   PHOTO HOVER
   ========================================================= */

.hero-photo:hover {

  transform:
    perspective(1000px)
    rotateY(5deg)
    rotateX(-3deg)
    translateZ(35px)
    scale(1.02);

  box-shadow:
    0 0 0 1px rgba(155,119,255,.15),
    0 0 70px rgba(155,119,255,.25),
    0 35px 90px rgba(0,0,0,.60);

}


/* =========================================================
   ACTUAL IMAGE
   ========================================================= */

.hero-photo img {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 50%;

  transform:
    translateZ(12px);

}


/* =========================================================
   PURPLE OUTER GLOW
   ========================================================= */

.hero-photo-glow {

  position: absolute;

  width: 360px;
  height: 360px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(155,119,255,.18),
      rgba(155,119,255,.06) 45%,
      transparent 70%
    );

  filter: blur(18px);

  opacity: .8;

  animation:
    heroGlow 4s ease-in-out infinite alternate;

  pointer-events: none;
}


/* =========================================================
   PHOTO PLACEHOLDER
   ========================================================= */

.hero-photo-placeholder {

  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 100px;
  font-weight: 800;

  color: var(--heading);

  text-shadow:
    0 0 30px rgba(155,119,255,.30);

}


/* =========================================================
   FLOATING ANIMATION
   ========================================================= */

@keyframes heroPhotoFloat {

  0%,
  100% {
    transform:
      translateY(0px)
      rotateZ(0deg);
  }

  50% {
    transform:
      translateY(-12px)
      rotateZ(.5deg);
  }

}


@keyframes heroGlow {

  from {
    transform: scale(.94);
    opacity: .55;
  }

  to {
    transform: scale(1.08);
    opacity: .90;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .hero-inner {

    grid-template-columns: 1fr;

    gap: 45px;

  }

  .hero-photo-wrap {

    order: -1;

    width: 280px;
    height: 280px;

  }

  .hero-photo {

    width: 240px;
    height: 240px;

  }

  .hero-photo-glow {

    width: 270px;
    height: 270px;

  }

}


@media (max-width: 600px) {

  #hero {

    padding:
      100px
      24px
      60px;

  }

  .hero-photo-wrap {

    width: 230px;
    height: 230px;

  }

  .hero-photo {

    width: 200px;
    height: 200px;

  }

  .hero-photo-glow {

    width: 220px;
    height: 220px;

  }

}

/* =========================================================
   FINAL HERO NAME SIZE
   Smaller, cleaner scale for the upcoming right-side
   circular profile photo + 3D space background.
   ========================================================= */

.hero-name{
  font-size:clamp(42px,5vw,72px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin-bottom:28px;
  padding-bottom:4px;
}

/* Keep the name balanced on tablets and phones */
@media(max-width:768px){
  .hero-name{
    font-size:clamp(40px,12vw,64px);
    line-height:1.02;
    letter-spacing:-.045em;
    margin-bottom:24px;
  }
}

/* =========================================================
   PREMIUM 3D SPACE PRESENTATION
   The actual 3D scene is rendered by Three.js in #bg.
   These styles keep it atmospheric and behind the UI.
   ========================================================= */

#bg{
  opacity:.52;
  filter:saturate(1.18) contrast(1.04);
  transform:translateZ(0);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(155,119,255,.035),
      transparent 38%
    ),
    radial-gradient(
      circle at 15% 25%,
      rgba(110,80,190,.025),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 70%,
      rgba(155,119,255,.018),
      transparent 32%
    );
  mix-blend-mode:screen;
}

/* Prevent the background atmosphere from affecting readability */
.hero-inner,
.profile-section,
section#work,
section#skills,
section#contact,
footer{
  position:relative;
  z-index:1;
}