:root{--bg:#F7F6F3;--surface:#FFFFFF;--surface2:#F1F0ED;--border:#E3E2E0;--border2:#D3D2CF;--text:#37352F;--muted:#787774;--accent:#2383E2;--accent-s:rgba(35,131,226,.1);--r:8px;--r-lg:12px;--shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 30px rgba(0,0,0,.12);--t:.15s ease;}
[data-theme="dark"]{--bg:#191919;--surface:#202020;--surface2:#2A2A2A;--border:#373737;--border2:#4A4A4A;--text:#E8E8E6;--muted:#9B9A97;--accent:#529CCA;--accent-s:rgba(82,156,202,.12);--shadow:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 12px rgba(0,0,0,.35);--shadow-lg:0 8px 30px rgba(0,0,0,.45);}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:20px 14px 40px;transition:background .25s,color .25s;font-size:14px;line-height:1.6;}
.layout{display:grid;grid-template-columns:240px 1fr 60px;gap:12px;width:100%;max-width:1020px;align-items:start;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 16px 20px;text-align:center;position:sticky;top:20px;transition:background .25s,border-color .25s;}
.avatar-zone{position:relative;display:inline-block;margin-bottom:14px;}
.avatar-ring{width:86px;height:86px;border-radius:18px;border:1.5px solid var(--border);overflow:hidden;background:var(--surface2);display:flex;align-items:center;justify-content:center;}
.avatar-img{width:100%;height:100%;object-fit:cover;display:none;}
.avatar-emoji{font-size:44px;line-height:1;}
.avail-pip{position:absolute;bottom:4px;right:4px;width:12px;height:12px;background:#3F9142;border-radius:50%;border:2px solid var(--surface);animation:pip 2.2s infinite;}
@keyframes pip{0%,100%{box-shadow:0 0 0 0 rgba(63,145,66,.4)}60%{box-shadow:0 0 0 5px rgba(63,145,66,0)}}
.s-name{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-.01em;}
.s-role{font-size:.7rem;color:var(--muted);margin-bottom:4px;}
.s-avail{font-size:.65rem;color:#3F9142;font-weight:600;display:inline-flex;align-items:center;gap:4px;margin-bottom:16px;}
.s-avail::before{content:'';width:5px;height:5px;border-radius:50%;background:#3F9142;display:inline-block;}
.socials{display:flex;justify-content:center;gap:6px;margin-bottom:16px;}
.soc-btn{width:30px;height:30px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:.75rem;transition:all var(--t);}
.soc-btn:hover{background:var(--accent-s);color:var(--accent);border-color:var(--accent);}
.info-list{list-style:none;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:14px;text-align:left;}
.info-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--border);font-size:.72rem;}
.info-row:last-child{border-bottom:none;}
.info-row .ico{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}
.info-label{font-size:.62rem;color:var(--muted);display:block;margin-bottom:1px;font-weight:500;}
.info-val{color:var(--text);font-weight:500;font-size:.72rem;}
.btn-dl{width:100%;padding:9px 14px;background:var(--text);color:var(--surface);border:none;border-radius:var(--r);font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;transition:opacity var(--t);}
.btn-dl:hover{opacity:.82;}
.main{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 28px 28px;min-height:580px;transition:background .25s,border-color .25s;overflow:hidden;}
.page{display:none;animation:fi .2s ease;}
.page.active{display:block;}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pg-tag{font-size:.62rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.pg-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;}
.pg-title{font-size:1.7rem;font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1.15;margin-bottom:8px;}
.pg-title .hi{color:var(--accent);}
.pg-lead{font-size:.82rem;color:var(--muted);line-height:1.7;margin-bottom:24px;max-width:460px;}
.act-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.btn-primary{padding:8px 18px;background:var(--text);color:var(--surface);border:none;border-radius:var(--r);font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:opacity var(--t);}
.btn-primary:hover{opacity:.8;}
.btn-secondary{padding:8px 18px;background:transparent;color:var(--text);border:1px solid var(--border2);border-radius:var(--r);font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all var(--t);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.sh h3{font-size:.78rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px;}
.sh h3::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0;}
.sh-link{font-size:.68rem;color:var(--muted);background:none;border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:500;transition:color var(--t);}
.sh-link:hover{color:var(--accent);}
.n-divider{height:1px;background:var(--border);margin:20px 0;}
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.skill-card{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all var(--t);background:var(--surface);}
.skill-card:hover{border-color:var(--border2);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.skill-img-zone{height:100px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.skill-img-zone img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:none;}
.sk-bg{position:absolute;inset:0;}
.sk-em{font-size:2rem;position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));}
.skill-body{padding:11px 13px 12px;}
.sk-name{font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:2px;letter-spacing:-.01em;}
.sk-sub{font-size:.65rem;color:var(--muted);}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.stat-box{border:1px solid var(--border);border-radius:var(--r);padding:14px 12px;text-align:center;}
.stat-n{font-size:1.65rem;font-weight:800;color:var(--text);letter-spacing:-.04em;}
.stat-l{font-size:.62rem;color:var(--muted);margin-top:1px;font-weight:500;}
.callout{border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;background:var(--surface2);display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;}
.callout-icon{font-size:1.05rem;flex-shrink:0;margin-top:1px;}
.callout p{font-size:.79rem;color:var(--muted);line-height:1.7;}
.about-cover{margin:-32px -28px 0;height:110px;background:linear-gradient(135deg,#E8F4FD,#EDE8F5,#F5EEE8);position:relative;}
[data-theme="dark"] .about-cover{background:linear-gradient(135deg,#1a2332,#1e1a2e,#2a1e1a);}
.about-cover-avatar{position:absolute;bottom:-28px;left:28px;width:60px;height:60px;border-radius:12px;background:var(--surface);border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:var(--shadow-md);overflow:hidden;}
.about-cover-avatar img{width:100%;height:100%;object-fit:cover;display:none;}
.back-link{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;font-family:'Poppins',sans-serif;padding:5px 8px;border-radius:5px;margin-bottom:16px;transition:all var(--t);}
.back-link:hover{background:var(--surface2);color:var(--text);}
.detail-hero{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px;}
.detail-img-zone{height:140px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.detail-img-zone img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:none;}
.d-bg{position:absolute;inset:0;}
.d-em{font-size:3rem;position:relative;z-index:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2));}
.detail-meta{padding:14px 16px;border-top:1px solid var(--border);}
.detail-title{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin-bottom:2px;}
.detail-sub{font-size:.73rem;color:var(--muted);}
.n-h{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-bottom:9px;margin-top:18px;}
.tools-wrap{display:flex;flex-wrap:wrap;gap:6px;}
.tool-tag{padding:3px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;font-size:.7rem;color:var(--text);font-weight:500;transition:all var(--t);}
.tool-tag:hover{background:var(--accent-s);border-color:var(--accent);color:var(--accent);}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px;}
.proj-card{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:all var(--t);background:var(--surface);}
.proj-card.has-url{cursor:pointer;}
.proj-card.has-url:hover{border-color:var(--border2);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.proj-thumb{height:100px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.proj-thumb-bg{position:absolute;inset:0;}
.proj-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:none;}
.proj-thumb-em{font-size:1.8rem;position:relative;z-index:1;}
.proj-info{padding:10px 12px;}
.proj-tag-label{font-size:.58rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;}
.proj-name{font-size:.76rem;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.proj-desc{font-size:.65rem;color:var(--muted);margin-top:2px;line-height:1.5;}
.proj-ext-link{display:inline-flex;align-items:center;gap:4px;font-size:.62rem;color:var(--accent);font-weight:600;margin-top:6px;text-decoration:none;}
.proj-ext-link:hover{text-decoration:underline;}
.empty-state{padding:28px 20px;text-align:center;background:var(--surface2);border-radius:var(--r);border:1px dashed var(--border2);}
.empty-state .es-em{font-size:1.8rem;margin-bottom:8px;}
.empty-state p{font-size:.74rem;color:var(--muted);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.contact-card{border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:all var(--t);text-decoration:none;color:inherit;}
.contact-card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-1px);}
.cc-ico{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.contact-card h4{font-size:.76rem;font-weight:700;margin-bottom:1px;}
.contact-card p{font-size:.64rem;color:var(--muted);}
.cta-block{border:1px solid var(--border);border-radius:var(--r);padding:20px;text-align:center;background:var(--surface2);}
.cta-block h3{font-size:.9rem;font-weight:800;letter-spacing:-.015em;margin-bottom:4px;}
.cta-block p{font-size:.73rem;color:var(--muted);}
.right-nav{display:flex;flex-direction:column;gap:7px;position:sticky;top:20px;}
.nav-btn{width:52px;height:52px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:all var(--t);color:var(--muted);font-size:.55rem;font-family:'Poppins',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.nav-btn i{font-size:.92rem;}
.nav-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--border2);}
.nav-btn.active{background:var(--text);color:var(--surface);border-color:var(--text);}
[data-theme="dark"] .nav-btn.active{color:#191919;}
.nav-sep{height:1px;background:var(--border);}
.nav-tog{width:52px;height:36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t);color:var(--text);font-size:.72rem;font-weight:700;font-family:'Poppins',sans-serif;}
.nav-tog:hover{background:var(--surface2);}
.mob-header,.mob-header-btn,.mob-actions,.mob-menu{display:none;}
.mob-profile-btn,.mob-profile-popup{display:none;}
@media(max-width:800px){
  .layout{grid-template-columns:1fr;padding-top:60px;padding-bottom:20px;}
  .sidebar{display:none !important;}
  .right-nav{display:none !important;}
  .mob-header{display:flex;position:fixed;top:0;left:0;right:0;height:60px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);z-index:1000;align-items:center;justify-content:space-between;padding:0 16px;}
  .mob-header-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:8px 14px;font-size:.75rem;font-weight:600;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;}
  .mob-menu-btn{display:flex;align-items:center;gap:8px;min-width:120px;}
  .mob-menu-btn i:last-child{font-size:.6rem;transition:transform .2s;}
  .mob-menu-btn.open i:last-child{transform:rotate(180deg);}
  .mob-actions{display:flex;gap:8px;}
  .mob-actions button{width:36px;height:36px;border-radius:var(--r);background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;}
  .mob-menu{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);display:none;flex-direction:column;}
  .mob-menu.show{display:flex;}
  .mob-menu-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border:none;border-bottom:1px solid var(--border);background:none;font-size:.85rem;font-weight:500;color:var(--text);cursor:pointer;font-family:'Poppins',sans-serif;text-align:left;width:100%;}
  .mob-menu-item:last-child{border-bottom:none;}
  .mob-menu-item:hover{background:var(--surface2);}
  .mob-menu-item i{width:20px;text-align:center;color:var(--muted);}
  .mob-menu-item.active{background:var(--accent-s);color:var(--accent);}
  .mob-menu-item.active i{color:var(--accent);}
  .main{padding:20px 16px 24px;min-height:auto;border-radius:0;}
  .pg-title{font-size:1.5rem;}
  .pg-lead{font-size:.85rem;}
  .about-cover{height:80px;margin:-20px -16px 0;}
  .about-cover-avatar{bottom:-20px;left:16px;width:50px;height:50px;font-size:26px;}
  .skills-grid,.proj-grid,.contact-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .act-row{display:flex;gap:8px;flex-wrap:wrap;}
  .mob-profile-btn{position:fixed;bottom:20px;left:20px;width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--border);box-shadow:var(--shadow-lg);cursor:pointer;z-index:998;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .mob-profile-btn img{width:100%;height:100%;object-fit:cover;}
  .mob-profile-btn .avatar-emoji{font-size:28px;display:block;}
  .mob-profile-popup{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:999;display:none;align-items:center;justify-content:center;padding:20px;}
  .mob-profile-popup.show{display:flex;}
  .mob-profile-content{background:var(--surface);border-radius:var(--r-lg);padding:24px 20px;max-width:320px;width:100%;max-height:80vh;overflow-y:auto;position:relative;animation:popIn .2s ease;}
  @keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
  .mob-profile-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
 }
@media(max-width:480px){
  .pg-title{font-size:1.3rem;}
  body{padding:10px 8px 100px;}
  .act-row{flex-direction:column;}
  .btn-primary,.btn-secondary{width:100%;justify-content:center;}
  .detail-img-zone{height:120px;}
  .detail-title{font-size:1.1rem;}
  .callout{flex-direction:column;gap:8px;}
  .tools-wrap{justify-content:center;}
 }


/* ── Project Modal ─────────────────────────────────── */
.proj-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);}
.proj-modal-overlay.show{display:flex;}
.proj-modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .22s ease;}
@keyframes modalIn{from{opacity:0;transform:scale(.93) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.proj-modal-close{position:absolute;top:12px;right:12px;z-index:10;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.35);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:background var(--t);}
.proj-modal-close:hover{background:rgba(0,0,0,.6);}
.proj-modal-thumb{height:200px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0;}
.proj-modal-thumb-bg{position:absolute;inset:0;}
.proj-modal-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:none;}
.proj-modal-em{font-size:3.5rem;position:relative;z-index:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));}
.proj-modal-body{padding:22px 24px 26px;}
.proj-modal-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.proj-modal-tag{font-size:.6rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;background:var(--accent-s);padding:2px 8px;border-radius:4px;}
.proj-modal-skill{font-size:.65rem;color:var(--muted);display:flex;align-items:center;gap:4px;}
.proj-modal-title{font-size:1.3rem;font-weight:800;letter-spacing:-.025em;color:var(--text);margin-bottom:10px;line-height:1.2;}
.proj-modal-desc{font-size:.8rem;color:var(--muted);line-height:1.75;margin-bottom:20px;}
.proj-modal-actions{display:flex;gap:8px;flex-wrap:wrap;}
.proj-modal-actions a{padding:9px 18px;border-radius:var(--r);font-size:.72rem;font-weight:600;font-family:'Poppins',sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:opacity var(--t);}
.proj-modal-actions a:hover{opacity:.82;}
.pm-btn-primary{background:var(--text);color:var(--surface);}
[data-theme="dark"] .pm-btn-primary{color:#191919;}
@media(max-width:560px){.proj-modal-thumb{height:150px;}.proj-modal-body{padding:18px 18px 22px;}.proj-modal-title{font-size:1.1rem;}}

/* ── Modal rich content ─────────────────────────────── */
.proj-modal-desc h2{font-size:1rem;font-weight:800;color:var(--text);margin:14px 0 5px;letter-spacing:-.015em;}
.proj-modal-desc h3{font-size:.88rem;font-weight:700;color:var(--text);margin:12px 0 4px;}
.proj-modal-desc p{margin-bottom:8px;font-size:.8rem;color:var(--muted);line-height:1.75;}
.proj-modal-desc ul,.proj-modal-desc ol{padding-left:20px;margin-bottom:10px;font-size:.8rem;color:var(--muted);line-height:1.75;}
.proj-modal-desc li{margin-bottom:3px;}
.proj-modal-desc a{color:var(--accent);text-decoration:underline;}
.proj-modal-desc a:hover{opacity:.8;}
.proj-modal-desc img{max-width:100%;border-radius:8px;margin:10px 0;display:block;}
.proj-modal-desc iframe,.proj-modal-desc .rte-embed{width:100%;aspect-ratio:16/9;border:none;border-radius:8px;margin:10px 0;display:block;}
.proj-modal-desc blockquote{border-left:3px solid var(--accent);padding:8px 14px;margin:10px 0;background:var(--surface2);border-radius:0 6px 6px 0;font-style:italic;font-size:.8rem;color:var(--muted);}
.proj-modal-desc strong,.proj-modal-desc b{color:var(--text);font-weight:700;}