:root{
  --bg:#f2f4f8;
  --card-bg:#ffffff;
  --text:#0f1419;
  --text-dim:#6b7280;
  --brand-dark:#161d26;
  --brand-navy:#0f1419;
  --accent:#0a84ff;
  --whatsapp:#25d366;
  --border:rgba(15,20,25,0.08);
  --shadow:0 10px 30px rgba(15,20,25,0.08);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;
    --card-bg:#161d26;
    --text:#f5f6f8;
    --text-dim:#9aa4b2;
    --border:rgba(255,255,255,0.08);
    --shadow:0 10px 30px rgba(0,0,0,0.5);
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

.app-bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(10,132,255,0.18), transparent 60%),
    radial-gradient(100% 50% at 100% 100%, rgba(37,211,102,0.12), transparent 60%),
    var(--bg);
}

.card-shell{
  max-width:440px;
  margin:0 auto;
  padding:calc(28px + var(--safe-top)) 20px calc(40px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.hero{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}

.avatar-wrap{ position:relative; margin-bottom:6px; }
.avatar{
  width:112px; height:112px; border-radius:50%;
  background:linear-gradient(160deg,var(--brand-dark),#243040);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(10,20,30,0.28), 0 0 0 4px var(--card-bg), 0 0 0 5px var(--border);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.avatar:active{ transform:scale(.96); }
.avatar img{ width:100%; height:100%; object-fit:cover; }
#avatarInitials{ font-size:34px; font-weight:600; color:#fff; letter-spacing:.5px; }

.name{
  font-family:"Poppins",-apple-system,sans-serif;
  font-size:26px; font-weight:600; margin:4px 0 0; outline:none;
  min-width:60px;
}
.role{
  font-size:15px; color:var(--text-dim); margin:0 0 4px; outline:none;
  min-width:60px;
}
[contenteditable]:empty:before{ content:attr(data-placeholder); color:var(--text-dim); opacity:.6; }
[contenteditable]:focus{ background:rgba(10,132,255,0.08); border-radius:8px; padding:2px 8px; margin:0 -8px; }

.company-pill{
  margin-top:14px;
  width:100%;
  display:flex; align-items:center; gap:12px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:var(--shadow);
}
.company-logo{
  width:44px; height:44px; object-fit:contain;
  background:var(--brand-dark);
  border-radius:12px; padding:6px;
  flex-shrink:0;
}
.company-text{ display:flex; flex-direction:column; text-align:left; gap:2px; }
.company-text strong{ font-size:14.5px; font-weight:600; }
.company-text span{ font-size:12px; color:var(--text-dim); line-height:1.3; }

.actions-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.action-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:var(--text);
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 6px 10px;
  box-shadow:var(--shadow);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}
.action-btn:active{ transform:scale(.94); }
.action-icon{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.action-label{ font-size:11.5px; font-weight:500; color:var(--text-dim); }

.primary-actions{ width:100%; display:flex; flex-direction:column; gap:10px; }
.btn-main{
  width:100%; border:none; cursor:pointer;
  background:linear-gradient(180deg,var(--accent),#0067d6);
  color:#fff; font-size:16px; font-weight:600;
  padding:15px 16px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 10px 24px rgba(10,132,255,0.35);
  transition:transform .12s ease, filter .12s ease;
}
.btn-main:active{ transform:scale(.97); filter:brightness(.94); }

.btn-secondary{
  width:100%; cursor:pointer;
  background:var(--card-bg); color:var(--text);
  border:1px solid var(--border);
  font-size:15px; font-weight:600;
  padding:14px 16px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease;
}
.btn-secondary:active{ transform:scale(.97); }

.qr-section{
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow);
}
.qr-box{ padding:10px; background:#fff; border-radius:14px; }
.qr-box canvas, .qr-box img, .qr-box table{ display:block; }
.qr-label{ font-size:12px; color:var(--text-dim); margin:0; }

.footer-note{
  font-size:11.5px; color:var(--text-dim); text-align:center; opacity:.7; margin-top:4px;
}

.toast{
  position:fixed; left:50%; bottom:calc(24px + var(--safe-bottom));
  transform:translate(-50%,20px);
  background:rgba(15,20,25,0.92); color:#fff;
  padding:11px 18px; border-radius:14px; font-size:13.5px; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:50;
  max-width:80%; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

@media (min-width:480px){
  .card-shell{ padding-top:48px; }
}