:root{--bg:#f3f4f6;--card-bg:#fff;--text:#111827;--subtext:#6b7280;--chip-bg:#e6eef8;--button-bg:#2563eb;--button-text:#fff;--border:#e5e7eb}.dark{--bg:#0f172a;--card-bg:#1e293b;--text:#f1f5f9;--subtext:#94a3b8;--chip-bg:#334155;--button-bg:#3b82f6;--button-text:#fff;--border:#334155}body{background:var(--bg);color:var(--text);justify-content:center;padding:10px;font-family:sans-serif;transition:background .25s,color .25s;display:flex}.app-wrapper{flex-direction:column;gap:16px;width:100%;max-width:520px;padding:20px;display:flex}.toggleBtn{background-color:var(--chip-bg);width:fit-content;color:var(--text);cursor:pointer;border:none;border-radius:20px;align-self:flex-end;align-items:center;gap:8px;padding:5px 10px;transition:background-color .25s,color .25s,transform .2s;display:inline-flex}.toggleBtn:hover{transition:background-color .25s,color .25s,transform .2s;transform:translateY(-1px)}.toggleIcon{width:16px;height:16px}.portfolio-card{background-color:var(--card-bg);border:1px solid var(--border);border-radius:10px;align-items:center;max-width:500px;margin:0 auto;padding:20px;transition:background-color .25s,border-color .25s;box-shadow:1px 1px 10px #00000014}.profile-header{align-items:center;margin-bottom:5px;display:flex}.profile-image{border-radius:50%;width:100px;height:100px;margin-right:20px;overflow:hidden}.profile-image img{object-fit:cover;width:100%;height:100%}.profile-info h2{margin-bottom:2px}.profile-info h3{color:#747b88}.profile-body{width:100%;margin-bottom:10px;padding:0}.profile-skills{padding:0}.skills{flex-wrap:wrap;gap:5px;display:flex}.badge{background-color:var(--chip-bg);color:var(--text);border-radius:20px;margin-bottom:5px;margin-right:5px;padding:5px 10px}.badge:hover{transition:background-color .25s,color .25s,transform .2s;transform:translateY(-1px)}.profile-footer{justify-content:space-between;align-items:center;gap:6px;max-width:490px;margin-top:10px;display:flex}.likeIcon{cursor:pointer;color:var(--text);background:0 0;border:none;align-items:center;gap:6px;height:36px;padding:0;font-size:14px;transition:color .25s;display:flex}.likeIcon img{flex-shrink:0;width:20px;height:20px;display:flex}.likeIcon img:hover{color:red;transition:transform .2s;transform:translateY(-1px)}.dark .likeIcon img{filter:invert()brightness(2)}.toggleIconCard{width:16px;height:16px}.dark .toggleIconCard{filter:invert()brightness(2)}.contact{background-color:var(--button-bg);color:var(--button-text);border:none;border-radius:10px;align-items:center;gap:5px;height:36px;padding:0 10px;display:flex}.contact img{filter:invert()brightness(2);flex-shrink:0;width:20px;height:20px;display:flex}.contact:hover{transition:background-color .3s,color .3s,transform .2s;transform:translateY(-1px)}.navGroup{gap:0;display:flex}.navBtns{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;margin:0;padding:0;font-size:16px;font-weight:700;display:flex}.dark .navBtns{filter:invert()brightness(2)}.toggleBtnCard{cursor:pointer;color:var(--text);background:0 0;border:none;align-items:center;gap:5px;padding:5px 0;transition:background-color .25s,color .25s;display:flex}.navBtns:hover{transition:background-color .25s,color .25s,transform .2s;transform:translateY(-1px)}.showTotal{justify-content:center;display:flex}.dark .likeIcon img,.dark .contact img,.dark .toggleBtn img,.dark .toggleBtnCard img{filter:invert()brightness(2)}